Saturday, September 12, 2015

Jquery Validate

                        How to use Jquery Validate

  • we need Jquery and Jquery.validate js files
  • we need specify class as "required" for input control which needs to have value 
  • In the document.ready we need to call validate
Html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery validate</title>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
<form id="form" class="form" name="ContactForm" method="POST">
 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-3">
                <label for="FirstName">
                    First Name
                </label>
                <input type="text" class="form-control required" id="FirstName">
            </div>
            <div class="col-md-3 ">
                <label for="LastName">
                    Last Name
                </label>
                <input type="text" class="form-control"   id="LastName">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <label for="Email">
                    Email
                </label>
                <input type="text" class="form-control  required email" id="Email">
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3 ">
                <button type="submit" class="btn btn-primary ">
                    Submit
                </button>
            </div>
        </div>
    </div>
 </div>
</form>
</body>
</html>
Java Script

<script type="text/javascript">
    $(document).ready(function () {
        $('.form').validate({
        });

    });
</script>



Java Script





Ouptput



No comments:

Post a Comment