ReddyInfoSoft: How to use Jquery Validator

Monday, January 30, 2017

How to use Jquery Validator

Here in this post I will show you how to use jquery validator.
In the previous posts I had show how to...
MVC:

OutPut:

AngularJS:

  

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="myform">
<br/>
 <div class="container">
  <div class="row">
   <div class="col-xs-3"> 
    <input type="text" name="field1" placeholder="Email" class="form-control"/>
   </div>
  </div>
   <br/>
  <div class="row">
   <div class="col-xs-3">
    <input type="text" name="field2" placeholder="Name"  class="form-control"/>
   </div>
  </div>
  <br/>
  <div class="row">
   <div  class="col-xs-3">
    <input type="submit" value="Save" class="btn btn-primary"/>
   </div>
  </div> 
 </div>
</form>

<style>

.error{
 color:red
}

.container {
     padding-right: 15px; /*15px in bootstrap.css*/
     padding-left: 25px;  /*idem*/
     margin-right: auto;
     margin-left: auto;
}

</style>
<script type="text/javascript">
$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});
</script>
</html>

ReddyInfoSoft

Monday, January 30, 2017

How to use Jquery Validator

No comments:

Post a Comment