Some of us have used a plugin to validate their form before submitting it. But it seems like that we don’t know enough how the field validation works. That’s why I’ve decided to talk about form validation today. Willing to show the way it works and if you go further, you can create your own form validation plugin, using regular expressions to test the user inputs.
Here is the picture of our article:
Explanation:
- While the user is entering the text, we show him explanation text in green;
- We also test if his input is correct, if not, we show an error message in red;
- We also use regular expressions to test if the typed value matches a given pattern
Html Code. Put this in FormValidationJS.htm file
[CODE]
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form validation!!!</title>
<link"formValidationJS.css"rel="stylesheet"type="text/css"/>
<scriptsrc="jquery.1.7.2.js"type="text/javascript"></script>
<scriptsrc="formValidationJS.js"type="text/javascript"></script>
</head>
<body><p> </p>
<center>
<formaction=''id='newUserForm'method="post"enctype="multipart/form-data">
<divclass='field'> Your Full Name<br/>
<inputid="fullname"name="fullnameVar"type="text"class="input"/><br/>
<divclass='report'>
<labelid="fullname_info"class='info'>type your name(s) four words or less</label><br/>
<labelid="fullname_error_message"class='error'>Your name must be alpha-numeric and not null. Please check and correct this value</label>
</div>
</div>
<divclass='field'>Your email<br/>
<inputid="email"name="emailVar"type="text"class="input"/>
<divclass='report'>
<labelid="email_info"class='info'>will help us to contact you back!<br/></label>
<labelid="email_error_message"class='error'>Ooops! this email is not valid</label>
</div>
</div>
<divclass='field'>Choose a password<br/>
<inputid="password"name="passwordVar"type="password"class="input"/>
<divclass='report'>
<labelid="Label3"class='info'>your secret word <br/></label>
<labelid="Label4"class='error'>This password is not enough strong! combine with a number please</label>
</div>
</div>
<divclass='field'>Retype your password<br/>
<inputid="password2"name="passwordVar2"type="password"class="input"/>
<divclass='report'>
<labelid="password2_info"class='info'>we want to check if you'll surely never forget this password<br/></label>
<labelid="password2_error_message"class='error'>Oops! How come you forgot your pass only now? The two passwords must match. please check again</label>
</div></div>
<divclass='field'>A picture of you :)<br/>
<inputid="picture"name="pictureVar"type="file"class="input"/>
<divclass='report'>
<labelid="picture_info"class='info'>Want to see your pic<br/></label>
<labelid="picture_error_message"class='error'>This field is required</label>
</div></div>
<divclass='field'>Your birth date<br/>
mm / dd / yyyy<br/>
<inputid="month"name="monthVar"type="text"class="input_40"/>
<inputid="day"name="dayVar"type="text"class="input_40"/>
<inputid="year"name="yearVar"type="text"class="input_40"/>
<divclass="report">
<labelid="birthdate_info"class='info'>Share your birthday and age with us please<br/></label>
<labelid="birthdate_error_message"class='error'>Ooops! This date is not valid. Please correct it</label>
</div></div>
<p>
<inputtype="submit"value="Register Now"/>
</p>
</form></center>
</body>
</html>
[/CODE]
Look inside the head tag:
[CODE]<link"formValidationJS.css"rel="stylesheet"type="text/css"/>
<scriptsrc="jquery.1.7.2.js"type="text/javascript"></script>
<scriptsrc="formValidationJS.js"type="text/javascript"></script>
[/CODE]
You will need three more files:
- A cascading style sheet named formValidationJS.css to design (or beautify) your html page with colors and so on.
- jquery.1.7.2.js The jQuery library: downloadable on jQuery website. I’m using the 1.7.2 version, which is the last released;
- And the validation code file, written in JavaScript-and-jQuery. The name of this file is formValidationJS.js
Here is the cascading style sheet:
[CODE]
*{margin:0auto; padding:0auto; font-family:Arial}
.left{float:left}
.right{float:right}
.clear{clear:both}
.error{color:Red; display:none; font-family:Verdana; font-size:80%;}
.report{min-height:20px;}
.info{color:#383;display:none;font-family:Verdana; font-size:80%;}
.none{border:none; background:none; list-style:none}
input[type='text'],input[type='password']{border:1pxsolid#ccc; height:20px;width:220px; background:#efefef; color:#363;}
input[type='file']{border:none; line-height:26px;width:220px; background:#efefef; color:#363;}
input[type='submit']{border:1pxsolid#fff;background:#3366a9;color:White;padding:3px10px;}
input.input_40{width:40px;}
.borderable_box{border:1pxsolid#ccc;}
input.gray_bg{background:#efefef}
input.red_bg{background-color:#fcc}
[/CODE]
Nothing to explain here, we only want to color our input field and their error messages…
Validation Code File
Onfocus()
Each time a field receives the focus, we want to show instructions that are inside the .info element and that was hidden via CSS. Here is how to do it.
[CODE]
//-----On focus, show info
$('div.field').each(function () {
var _block = $(this);
_block.find('input').focus(function () {
var _input = $(this);
_block.find('.info').fadeIn(300);
}).focusout(function () {
_block.find('.info').fadeOut(100);
});
});
[/CODE]
Validating the name
A name can’t contain a number, a special char or a symbol. In addition, the full name must be at list 3 characters long! We also allow names consisting of one to four words. A name like ‘Xian Chin XiaoJu’ is allowed, the same than ‘Mark Zuckerberg’ or ‘Ricardhino’. But you can’t type a long name like: ‘Foo Bar Gentle Richard Sergio’ thereis five words and this will not be validated. A friend of mine used to cut his name ‘ASENGO JEI’ in ‘As’, this will not work because the word‘As’ has less than three letters.
Here is the code to validate the name:
[CODE]//------------validate name
varfullNameObject = formObject.find('#fullname');
fullNameObject.keyup(function () {
var me = $(this);
varmyValue = me.val();
varmeError = false;
meError |= myValue == null || typeofmyValue == undefined;
meError |= (myValue.split(' ') != null) ? myValue.split(' ').length > 4 : false; //more than 4 words ?
var pattern = /^([a-zA-ZÀ-ÿ\s]{3,})$/;
varexpr = newRegExp(pattern);
meError |= !(expr.exec(myValue));
if (meError) {
me.addClass('red_bg');
me.parents('div.field').find('.info').fadeOut(100);
me.parents('div.field').find('.error').fadeIn(300);
}
else {
me.removeClass('red_bg');
me.parents('div.field').find('.error').fadeOut(100);
}
errorOccured = meError;
});
//-----------end
[/CODE]
There is a regular expression!!! Let me explain it:
[CODE]
var pattern = /^([a-zA-ZÀ-ÿ\s]{3,})$/;
varexpr = newRegExp(pattern);
meError |= !(expr.exec(myValue));
[/CODE]
- ^ means that a name must begin and
- ($) means that it must end with a set of chars in parentheses,
- [a-zA-ZÀ-ÿ\s]{Alphabetical letters, from a toz including lower and uppercase. Some European name such as Portuguese, French,
- Spanish names have accents over vowels. That’s why I added the area from À to ÿ. Finally, I
...
Post view interrupted. To view full content,
click here
5/16/2012 10:44:00 PM
2012
2012
5
1