IntroductionToWebPart4

Html Form Validation by javascript using Regular Expressions

Theory:

Javascript is theProgramming language og html and the web.It is easy to learn

Mainly Javascriot is used for client side validations by responding events in html . For this tutorial it is enough to used event called oncick() .

If you want to know about events in html and javascript then refer https://www.w3schools.com/js/js_events.asp

Here There is no specific datatype in javascript unlike we have datatypes like int,float,double,String etc in other programming languages. We have only one datatype called var(variable).

The new feaature introduce in javascript called Regular Expressions. By using this the client side validations are very easy

It has a function called test() for validate the user input

Syntax = validation_code.text(Our input varaiable)
if its validates then returns boolean true.

For storing the input field value into variable we use:
Syntax = var variable_name=document.form_name.input_filed_name.value

Html page ➢FormValidation.html

<!Doctype html>
<html>
<head>
<title>Online tutorials</title>
<script src="javascript.js" type="text/javascript"></script>
<style type="text/css">
span{
color:#FF0000;
}
</style>
</head>
<body>
<center><h1>Form Validation</h1></center>
<center><table border="1">
<form name="form1" action="#" method="post">
<tr>
<th>Enter yourName:</th><td><input type="text" name="name" required/> <span>*</span></td>
</tr>
<tr>
<th>Enter Father name:</th><td><input type="text" name="fname" id="fname" required/><span>*</span></td>
</tr>
<tr><th>gender:</th><td><input type="radio" name="gender" value="m"/>male
<input type="radio" name="gender" value="f"/>female <span>*</span></td>
</tr>
<tr><th>Email:</th><td><input type="email" name="email" required/><span>*</span></td>
</tr>
<tr><th>Date of registeration:</th><td><input type="date" name="date"required/> <span>*</span></td>
</tr>
<tr><th>Create usernmae:</th><td><input type="text" name="uname" required/><span>*</span></td>
</tr>
<tr><th>create password:</th><td><input type="password" name="password"required /><span>*</span></td>
</tr>
<tr><th colspan="2"><textarea rows="4" cols="50" name="comments"placeholder="Enter Some Message" required></textarea><span>*</span>
</th></tr>
<tr><th colspan="2"><input type="submit" value="submit" onClick="validation();"></th></tr>
</form>
</table>
<h2><span>*</span> Fields are compulsary</h2></center>
</body>
</html>

Javascript page ➢Javascript.js

// JavaScript Document
function validation(){ var name = document.form1.name.value;
var fname= document.form1.fname.value;
var gender= document.form1.gender.value;
var username= document.form1.uname.value;
var password= document.form1.password.value;
var comments= document.form1.comments.value;
if(name==""||fname==""||gender==""||username==""||password==""||comments==""){
alert("All fields are compulsary");
}
else{
//I think you all aware of what is regular Expressions
//Because now we validate or resrict the fields using RE
//Syntax for regular expressions /^...validatecode...$/
var ck_name = /^[A-Za-z ]{3,30}$/;
var ck_fname= /^[A-Za-z ]{3,30}$/;
var ck_username = /^[A-Za-z0-9_]{6,20}$/;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
var ck_comments=/^[A-Za-z0-9_ ]{10,50}$/;
var errors = [];//initial value is 0 length
//test() function is used to text the name and RE if match then i it outputs boolean true
if (!ck_name.test(name)) {
   errors[errors.length] = "Your Name is Invalid .";
}
if (!ck_fname.test(fname)) {
   errors[errors.length] = "Father name is invalid .";
}
if (!ck_username.test(username)) {
   errors[errors.length] = "Username invaild plese check";
}
if (!ck_comments.test(comments)) {
   errors[errors.length] = "Please Enter a messege minimun 10 to 50 Characters";
}
if (!ck_password.test(password)) {
   errors[errors.length] = "You must enter a valid Password min 6 char.";
}
if (gender==0) {
errors[errors.length] = "Select Gender";
}
if (errors.length > 0) {
   DisplayErrors(errors); }else{
alert("Sucessfully Validated");
}
}
} function DisplayErrors(errors){
var msg = "Please Enter Valid Data...\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}

If you want to see how its runs in actual browser.

Next➱

⭅ Prev

Search Here

Tech Teach