Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
  <script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<meta charset=utf-8 />
<title>Bootstrap + JQuery Validate</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .control-group.error .help-block { color: blue; }
  .control-group .help-block { color: blue; }
</style>
</head>
<body>
  <br>
  <form id="test-form" class="form-horizontal">
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="place-of-birth">Place of birth</label>
        <div class="controls">
          <p class="help-block">Please input place of birth below, 2-80 symbols</p>
          <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off" value="V">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="amount">Amount</label>
      <div class="controls">
        <div class="input-append">
          <input type="text" class="input-small" id="amount" name="amount" maxlength="7"><span class="add-on">USD</span>
        </div>
        <p class="help-block">input non-digit value and click somewhere to see the problem</p>        
      </div>                 
    </div>
      <input type="button" id="validate" name="validate" value="Validate">
      <input type="submit" id="validate" name="validate" value="Submit">
    </fieldset>
  </form>
</body>
</html>
 
$(document).ready(function () {
  var validator = $("#test-form").validate({
    errorClass: "help-block",
    errorElement: "div",
    highlight: function(element, errorClass) {
      $(element).parents("div.control-group").removeClass("success");
      $(element).parents("div.control-group").addClass("error");
    },
    unhighlight: function(element, errorClass) {
      $(element).parents("div.control-group").removeClass("error");
      $(element).parents("div.control-group").addClass("success");          
    },    
    groups: { 
      username: "field1 field2"
    },
    errorPlacement: function(error, element) {
      // to support groups defined above
      var elementName = $(element).attr("name"),
          lastInGroup = $.map(this.groups, function(fields, name) {
            var fieldsArr;
            if (fields.indexOf(elementName) >= 0) {
              fieldsArr = fields.split(" ");
              return fieldsArr[fieldsArr.length - 1];
            } else {
              return null;
            }
          })[0];
      if (lastInGroup) {      
        $(error).insertAfter($("input[name='" + lastInGroup + "']"));
      } else {
        $(error).appendTo($(element).parent());
​
      }
    },    
    rules: {
      "amount": {
        required: false,
        digits: true
      }
    }
  });
​
  
  $("#validate").click(function() {
     if ($("#test-form").valid()) 
        alert("Valid!");
      else
        validator.focusInvalid();
    
     return false;
  });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers