Jquery Form Validation and Submission

We have created a simple script to validate the form using jQuery. jQuery provides the client-side validation of the form. For the jQuery validation we used to add the two library files:
1. jquery-1.10.2.js
2. jquery.validate.js

Here are an example to display how to implement jQuery on the page, we have three fields which we have validated here:
1. fullname
2. email
3. mobile

We have also checked the "fullname" and "email" uniqness with using the "remote" method.
This validation is implemented on the "CodeIgniter" Framework here:
<script id="demo" type="text/javascript">
$(document).ready(function() {
    // validate signup form on keyup and submit for company profile
    var validator = $("#cadminForm").validate({
        rules: {
            fullname: {
                required: true,
                remote:"http://www.example.com/admin/checkName?type=create&id=&';?>",
            },
            email: {
                required: true,
                email: true,
                remote:"http://www.example.com/admin/checkEmail?type=create&id=&';?>",
            },
            mobile: {
                required: true,
                number: true,
                minlength: 10,
                maxlength: 10
            },
        },
        messages: {
            fullname: {
                required: "Please enter full name.",
                remote: jQuery.validator.format("{0} is already in use")
            },
            email: {
                required: "Please enter a valid email address",
                remote: jQuery.validator.format("{0} is already in use")
            },
            mobile:{
               required:"Please enter mobile number",
               number: "Please enter numeric value only",
               minlength: jQuery.validator.format("Please enter at least {0} digit number"),
               maxlength: jQuery.validator.format("Please enter not more than {0} digit number"),
            },
           
        },
       
        submitHandler: function() {
          form.submit();
        }
   });
});
</script>

<form action="" method="post" name="cForm" id="cForm">
Full Name: <input type="text" name="fullname" id="fullname" />
Email:<input type="text" name="email" id="email" />
Mobile:<input type="text" name="mobile" id="mobile" />
<button type="submit">Save</button>
</form>

Comments

Popular posts from this blog

5 Simple steps to improve the performance of a CodeIgniter Site

Bigbasket - Redirect to the Bigbasket Product Detail Page without choosing the location