How to Validate Form Inputs using Jquery Validation Plugin

How to Validate Form Inputs using Jquery Validation Plugin

Here we will see how jquery validation plugin validate your form. Jquery validation is a client side validation, which performs through browser. It makes easy to validate your form inputs, without reload the page.

Let see how to implement this. In this example I am using CDN link of jquery validation. Please find below the code.

<html>
<head>
<title>Jquery Validation Example</title>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;
border-collapse: collapse;
}
.error{
    color:red;
  font-size: 11px;
}
</style>
<h3>Jquery Validation Example</h3>
<formid="myform">
<tablealign="center"cellpadding = "5">
<tr>
<td>Name</td>
<td><inputtype="text"size="40px"name="name"/></td>
</tr>
<tr>
<td>Email</td>
<td><inputtype="text"size="40px"name="email"/></td>
</tr>
<tr>
<td>Mobile</td>
<td><inputtype="text"size="40px"name="mobile" /></td>
</tr>
<tr>
<td>Adress</td>
<td><inputtype="text"size="40px"name="address"maxlength="100"/></td>
</tr>
<tr>
<td>File</td>
<td><inputtype="file"name="employeefile" /></td>
</tr>
<tr>
<tdcolspan="5"align="center">
<inputtype="submit"value="Register"/></td>
</tr>
</table>
</form>
<script>
$(document).ready(function () {
/* Email address validation */
jQuery.validator.addMethod("emp_email_valid", function(value, element) {
         return this.optional( element ) || /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
        }, 'Please enter a valid email address.');
    /* Mobile number validation */
    jQuery.validator.addMethod("mobile_number", function(value, element) {
         return this.optional( element ) || /^[0-9]{10}$/.test( value );
        }, 'Please enter a valid mobile number.');
/* File validation */
jQuery.validator.addMethod("extension", function (value, element, param) {
param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
returnthis.optional(element) || value.match(new RegExp(".("+ param +")$", "i"));
}, "Please upload pdf or doc files.");
$('#myform').validate({ // initialize the plugin
rules: {
name: {
required: true,
},
email: {
required: true,
emp_email_valid: true
},
mobile: {
required: true,
mobile_number : true
},
address: {
required: true,
},
employeefile: {
required: true,
extension: "pdf|doc"
}
}
});
});
</script>
</body>
</html>
Jquery validation

Note: Client side validation should only be used to improve user experience, never for security because the javascript performs only in the browser and the browser is runs on the user’s machine.It can be fully controlled by the user.