SO form vaildation

by panchroma

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/u/2665617/bootstrap/2013-02-12/bootstrap.css">
<form id="new-contract">
    <div class="input_align">
    <label class="control-label4" for="facility_name">Facility Name</label>

    <input type="text" class="input-largex3" name="facility_name" id="" required >
</div>

<div class="multi_align">
    <div class="input_align input_col1">
        <label class="control-label4" for="facility_npi">Facility NPI</label>
        <input type="text" class="input-mini" id="" name="facility_npi">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="fed_id">Fed ID</label>
        <input type="text" class="input-mini" id="" name="fed_id">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="medicare_id">Med ID</label>
        <input type="text" class="input-mini" id="" name="med_id">
    </div>
</div>
        <button type="submit" class="btn">Submit</button>
        </form>

JavaScript

$('#new-contract').validate({
        rules: {
          facility_name: {
            required: true,
          },
          facility_npi: {
            required: true,
          },
          fed_id: {
            minlength: 2,
            required: true
          }
        },

        highlight: function(label) {
            $(label).closest('input').removeClass ('success').addClass('error');
        },
        success: function(label) {
            label
                .text('OK!').addClass('valid')
                .closest('input').addClass('success');
        },
        errorPlacement: function(error, element) {
         error.appendTo( element.parents ('input') );
       }
      });