Michael Janea

FORM VALIDATION (728 downloads)

Real-time validation before submitting your forms for Bootstrap.

Compatible with Bootstrap 3.0 and up.

 

Demo

<div class="form-group">
    <label class="control-label col-sm-5">Required Field</label>
    <div class="col-sm-6">
        <select class="form-control required">
            <option></option>
            <option value="1">test</option>
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required uppercase" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">E-mail Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control email" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required E-mail Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required email" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Numeric Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control numeric" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required Numeric Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required numeric" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Numeric Field with Minimum Validation</label>
    <div class="col-sm-6">
        <input type="text" class="form-control numeric" data-minimum="1" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required Numeric Field with Minimum Validation</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required numeric" data-minimum="1" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Numeric Field with Minimum and Maximum Validation</label>
    <div class="col-sm-6">
        <input type="text" class="form-control numeric" data-minimum="1" data-maximum="2" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required Numeric Field with Minimum and Maximum Validation</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required numeric" data-minimum="1" data-maximum="2" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">URL Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control url" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Required URL Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control required url" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Match Field Value Should be the same with this field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control" name="match" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-5">Match Field</label>
    <div class="col-sm-6">
        <input type="text" class="form-control match" data-match-field="match" data-match-field-label="above" />
    </div>
</div>
<script type="text/javascript">
$(function(){
    $('form').mjFormValidation();
});
</script>
.validation {display:none; position:absolute; color:#f00; font-size:11px; right:0; top:0;}
			.form-horizontal .validation {right:4.5em; top:.8em;}

 

Directions

  1. Extract the downloaded zip file (mjFormValidation.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjFormValidation.css" />
  3. Insert below codes before the </body> tag of your page
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="mjFormValidation.js"></script>
    <script type="text/javascript">
    $(function(){
        $('form').mjFormValidation({
            error_messages : {
                required    : 'This field is required',
                email       : 'Invalid e-mail address',
                numeric     : [
                    'This field must be numeric',
                    'This field must be at least {minimum}',
                    'This field must not exceed to {maximum}',
                    'This field must be at least {minimum} and must not exceed to {maximum}'
                ],
                url         : 'Invalid URL',
                match_field : 'This field should match {match} field value'
            }
        });
    });
    </script>
  4. Add the following classes according to your preferences:
    • required - to validate required fields
    • email - to validate e-mail address fields
    • numeric - to validate numeric fields
      Additional options (element attributes):
      • data-minimum - minimum value for numeric field
      • data-maximum - maximum value for numeric field
    • url - to validate url fields
    • match - to validate if two fields are matched
      Additional options (element attributes)
      • data-match-field - name attribute of the element you want the field to match
      • data-match-field-label - label of the field you want to match

 

Logs

 

Download Form Validation

 

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.