Validations With Examples using JavaScript

1.Create Webpage for Registration form With JavaScript Validations.
<html>

<head><title>Java Validations</title>
<script type=”text/javascript”>
var rx = false;
var cx = false;
var pwdx = false;
var emailx = false;
function requiredfield(txt)
{var t=txt.value

;if (t == “”){

alert(“this field is required”);
return rx = false;
}

else{return rx= true;}

}

function checkchar(txt)
{

var t = txt.value;
if (t != “”)
{
if (t.length < 6) {
alert(“The Password should be 6 char or More”);
return cx = false;
}
else { return cx = true; }
}
else
{
alert(“password must be filled out”);
}
}
function pwdmismatch(txt)
{

var t = txt.value;
if (t != “”)
{
var pwd=document.getElementById(“pwd”).value;
var cpwd=document.getElementById(“cpwd”).value;
if (cpwd != pwd) {
alert(“Password Mismatch….!”);
return pwdx = false;
}
else
{
return pwdx = true;
}

}
else
{
alert(“field must be filled out”);

}

}

function ValidEmail(txt)
{

var t=txt.value;
if(t!=””)
{
var aptos=t.indexOf(“@”);
var dotpos=t.lastIndexOf(“.”);
if (aptos < 1 || dotpos < aptos + 2 || dotpos + 2 >= t.length) {
alert(“Email is not Valid…Please Enter Valid Email Id”);
return emailx = false;
} else {
return emailx = true;
}

}

}

function submit() {
if (rx== true && cx== true && pwdx == true && emailx== true)
{
document.writeln(“The Information Sucessfully submitted”);
} else {
document.writeln(“Not Submitted Please Fill Correct Information”);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>UserName</td>
<td><input type=”text” id=”Uname” onblur=”return requiredfield(this)”/></td>
</tr>
<tr>
<td>Password</td>
<td><input type=”password” id=”pwd” onblur=”checkchar(this)”/></td>
</tr>

<tr>
<td>Confirm Password</td>
<td><input type=”password” id=”cpwd” onblur=”pwdmismatch(this)”/></td>
</tr>

<tr>
<td>Email:</td>
<td><input type=”text” id=”email” onblur=”ValidEmail(this)”/></td>
</tr>

<tr>
<td></td>
<td><input type=”button” id=”b1″ value=”Submit” onclick=”submit()”/></td>
</tr>

</table>
</body>
</html>

In J Query The Code Will Be like Follows………..

<html>
<head>
<title>Simple Form Validation</title>

<script src=”jquery-1.6.2.min.js”></script>                //These are the file you have to                                                                                                             include in your page
<script src=”jquery.validate.min.js”></script>          //

<script type=”text/javascript”>
$(document).ready(function () {
var form2 = $(‘form2’);
$(“#form2”).validate({
rules: {
name: {
required: true,

},// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true,

},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: “Please enter a comment.”
}
});
if ($form2.valid()) {
$form2.submit(); //submitting the form
}

});

</script>

</head>
<body>
<form id=”form2″><br />
Name * <input type=”text” name=”name” /> <br />
E-Mail *<input type=”text” name=”email” /> <br />

URL <input type=”text” name=”url” /> <br />
Your comment * <textarea name=”comment” ></textarea> <br />
<input class=”submit” type=”submit” value=”Submit” id=”btn” >
</form>
</body>
</html>

Leave a comment