Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Faramarz Dorani
FormValidator Field Messages
April 22, 2013 2:51 AM
Answer

Faramarz Dorani

Rank: New Member

Posts: 7

Join Date: February 25, 2013

Recent Posts

Hello everybody,

I used AllyUI Tutorial Example for FormValidator in my project.
But I encountered some problems. I think my jsp file can't recognize the css classes used in this example. (aui-field-label, ui-field-required, ...)
Furthermore, custom messages don't appear near the input fields.

This is the code:
 1<form id="myForm">
 2  <p>
 3    <label class="aui-field-label" for="name">Name:</label>
 4    <input class="aui-field-required" type="text" name="name" />
 5  </p>
 6  <p>
 7    <label class="aui-field-label" for="email">Email:</label>
 8    <input class="aui-field-required aui-field-email" type="text" name="email" />
 9  </p>
10  <p>
11    <label class="aui-field-label" for="age">Age:</label>
12    <input class="aui-field-required aui-field-digits" type="text" name="age" />
13  </p>
14  <p>
15    <input class="aui-button-input" type="submit" value="Submit" />
16    <input class="aui-button-input" type="reset" value="Reset" />
17  </p>
18</form>


Could anyone please help me??!!!
I really need to solve it.
Thank you so much.
Apoorva Prakash
RE: FormValidator Field Messages
April 22, 2013 11:47 PM
Answer

Apoorva Prakash

Rank: Liferay Master

Posts: 659

Join Date: June 15, 2010

Recent Posts

Faramarz Dorani:
Hello everybody,

I used AllyUI Tutorial Example for FormValidator in my project.
But I encountered some problems. I think my jsp file can't recognize the css classes used in this example. (aui-field-label, ui-field-required, ...)
Furthermore, custom messages don't appear near the input fields.

This is the code:
 1<form id="myForm">
 2  <p>
 3    <label class="aui-field-label" for="name">Name:</label>
 4    <input class="aui-field-required" type="text" name="name" />
 5  </p>
 6  <p>
 7    <label class="aui-field-label" for="email">Email:</label>
 8    <input class="aui-field-required aui-field-email" type="text" name="email" />
 9  </p>
10  <p>
11    <label class="aui-field-label" for="age">Age:</label>
12    <input class="aui-field-required aui-field-digits" type="text" name="age" />
13  </p>
14  <p>
15    <input class="aui-button-input" type="submit" value="Submit" />
16    <input class="aui-button-input" type="reset" value="Reset" />
17  </p>
18</form>


Could anyone please help me??!!!
I really need to solve it.
Thank you so much.


Please check form.css of theme.
Vilmos Papp
RE: FormValidator Field Messages
April 23, 2013 5:03 AM
Answer

Vilmos Papp

LIFERAY STAFF

Rank: Liferay Master

Posts: 521

Join Date: October 21, 2010

Recent Posts

Are you sure, you loaded the aui-form-validator module?
Faramarz Dorani
RE: FormValidator Field Messages
April 23, 2013 5:43 AM
Answer

Faramarz Dorani

Rank: New Member

Posts: 7

Join Date: February 25, 2013

Recent Posts

Hi Vilmos Papp, thanks for your help,

Ofcourse I loaded it. Here is the script code:
 1AUI().ready(
 2  'aui-form-validator',
 3  function(A) {
 4    new A.FormValidator(
 5      {
 6        boundingBox: '#myForm'
 7      }
 8    );
 9  }
10);
Faramarz Dorani
RE: FormValidator Field Messages
April 23, 2013 5:51 AM
Answer

Faramarz Dorani

Rank: New Member

Posts: 7

Join Date: February 25, 2013

Recent Posts

Hi Apoorva Prakash, Thanks for your reply,
But, what did you mean by checking form.css??
I checked it. It is here: liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\ROOT\html\css\portal
You mean this file can't be loaded?? or what??
Vilmos Papp
RE: FormValidator Field Messages
April 23, 2013 7:52 AM
Answer

Vilmos Papp

LIFERAY STAFF

Rank: Liferay Master

Posts: 521

Join Date: October 21, 2010

Recent Posts

Hi Faramarz,

You should check for your theme's css files for the css classes. Anyway if you try to create a portlet, you could use aui:inputs instead like this:

1<aui:form action="<%= configurationURL %>" method="post" name="fm" onSubmit='<%= "event.preventDefault(); " + renderResponse.getNamespace() + "saveConfiguration();" %>'>
2    <aui:input iputCssClass="aui-field-number"  label="shadow-opacity" name="shadowOpacityField" type="text" value="<%= shadowOpacity %>" />
3     <aui:input label="shadow-angle" name="shadowAngleField" type="text" value="<%= shadowAngle %>" />
4    <aui:button-row>
5        <aui:button type="submit" />
6    </aui:button-row>
7</aui:form>


 1
 2<aui:script>
 3var <portlet:namespace />formValidator;
 4AUI().ready('aui-form-validator', function(A) {
 5        <portlet:namespace />formValidator = new A.FormValidator(
 6                {
 7                    boundingBox: document.<portlet:namespace />fm,
 8                    validateOnInput: true,
 9                    rules : {
10                        <portlet:namespace />shadowAngleField:{
11                            digits: true,
12                            min: 0,
13                            max: 360
14                        },
15                        <portlet:namespace />shadowOpacityField:{
16                            digits: true,
17                            min: 0,
18                            max: 100
19                        }
20                    }
21                }
22            );
23    });
24</aui:script>


I have this code in one of my hobby portlet's configuration.jsp file and runs fine with 6.1.1 CE GA2

Cheers,
Vilmos
angu manikandan
RE: FormValidator Field Messages
May 22, 2013 12:38 AM
Answer

angu manikandan

Rank: Junior Member

Posts: 72

Join Date: July 16, 2012

Recent Posts

like aui email form validation class instead of i want domain name validation

Example: class="aui-field-required aui-field-email"-->instaed of email i want domain name validation is there any solution regardind my question?????????????????/
Vilmos Papp
RE: FormValidator Field Messages
May 28, 2013 4:14 AM
Answer

Vilmos Papp

LIFERAY STAFF

Rank: Liferay Master

Posts: 521

Join Date: October 21, 2010

Recent Posts

You can add your regex for domain validation like the rules override.

Take a look at here: http://rajeevalochanabr.wordpress.com/2012/08/20/validation-using-auialloy-user-interface-script-and-html-form/