form validation

jquery validation

by sunil puvvada

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<form id="myForm" role="form" method="post" class="form-horizontal" name="myForm">
  <div class="form-group">
    <label for="inputName" class="col-md-3 control-label">Name</label>
    <div class="col-md-6">
      <input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
    </div>
  </div>


  <div class="form-group">
    <label for="inputEmail" class="col-md-3 control-label">Email</label>
    <div class="col-md-6">
      <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-md-3 control-label">Password</label>
    <div class="form-group col-sm-6">
      <input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
      <span class="help-block">Minimum of 6 characters</span>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
    <div class="form-group col-sm-6">
      <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-9 col-md-offset-3">
      <button type="submit" name="submit" class="btn btn-primary">Register</button>
    </div>
  </div>
</form>

JavaScript

$(document).ready(function() {
  $('#myForm').validator();
});