SO - 28805321

by Arun P Johny

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<form action="" method="post" id="register-form" novalidate="novalidate">
    <div class="label">First Name</div>
    <input type="text" id="firstname" name="firstname" />
    <br />
    <div class="label">Last Name</div>
    <input type="text" id="lastname" name="lastname" />
    <br />
    <div class="label">Email</div>
    <input type="email" id="email" name="email" />
    <br />
    <div class="label">Mobile</div>
    <input type="number" name="mobile" id="mobile" />
    <br />
    <div class="label">DOB</div>
    <input type="text" name="dob" id="dob" class="datepicker" />
    <br />
    <div class="label">Location</div>
    <input type="text" name="location" id="location" />
    <br />
    <div class="label">State</div>
    <input type="text" name="state" id="state" />
    <br />
    <div class="label">Gender</div>
    <input type="radio" name="gender" id="gender" value="male" />Male
    <input type="radio" name="gender" id="gender" value="female" />Female
    <br />
    <div>
        <br />
        <input type="checkbox" name="agree" id="mobile" />&nbsp;Do You accept our terms of service?
        <br />
        <br />
        <div>
     ...

JavaScript

jQuery(function ($) {
    $("#register-form").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true,
                minlength: 10,
                pattern: /^[789]/
            },
            dob: "required",
            location: "required",
            state: "required",
            gender: "required",
            agree: "required"
        },
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            mobile: {
                required: "Please provide your mobile number",
                minlength: "Your mobile number must be 10 characters long",
                pattern: 'should start with 7,8 or 9'
            },
            email: "Please enter a valid email address",
            dob: "Please provide you Date of Birth",
            location: "Please provide your location",
            state: "Please provide your state",
            gender: "Please provide your gender",
            agree: "Please accept our terms of service"
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});