form validation all element in jquery Reviewed by Momizat on . [php] <!DOCTYPE html> <html> <head> <title>My Validation</title> <script src="jquery-1.7.1.min.js"></script> [php] <!DOCTYPE html> <html> <head> <title>My Validation</title> <script src="jquery-1.7.1.min.js"></script> Rating: 0

form validation all element in jquery

<!DOCTYPE html>
<html>
<head>
<title>My Validation</title>
<script src="jquery-1.7.1.min.js"></script>
<style>
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
</style>
</head>
<body>

<form id="f1" name="f1" method="post">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" required />
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required email="true" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" required minlength="8" />
</p>
<p>
<label for="gender_male">
<input  type="radio" id="gender_male" value="m" name="gender" required>
Male
</label>
<label for="gender_female">
<input  type="radio" id="gender_female" value="f" name="gender">
Female
</label>
</p>
<p>
<label for="jungle">Please select a jungle noun</label><br>
<select id="jungle" name="jungle" title="Please select something!" required>
<option value="">-none-</option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" id="agree" name="agree" required>
<br>
</p>
<input type="submit" value="Login" />
</form>

<script src="jquery.validate.js"></script>
<script language="JavaScript" type="text/javascript">

/*
Validation Rules:

required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again."EX:-equalTo="#name",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),Ex:-rangelength=6,10
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

*/
jQuery.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
},"only alphanumeric");
jQuery.validator.addMethod("alphaspace", function(value, element) {
return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
},"only alpha and space");
jQuery.validator.addMethod("phone", function(value, element) {
return this.optional(element) || /^[0-9\-\+]+$/.test(value);
},"only number or dash");
$.validator.addMethod("user_email_not_same", function(value, element) {
return $('#name').val() != $('#email').val();
}, "* User and Email should not match");

$.validator.addMethod("filevalidate", function(value, element) {
var ext = $('#ff').val().split('.').pop().toLowerCase();
return ($.inArray(ext, ['gif','png','jpg','jpeg']) != '-1');
}, "Invalid file");


$(document).ready(function() {
$("#f1").validate();
});


</script>
</body>
</html>




Leave a Comment

© 2014 Powered By