Bootstrap form validation

The HTML :

  <form class="form-horizontal" action=" " method="post"  id="reg_form">
    <fieldset>
     
      <!-- Form Name -->
      <legend> Personal Information </legend>
   
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label">First Name</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input  name="first_name" placeholder="First Name" class="form-control"  type="text">
          </div>
        </div>
      </div>
     
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label" >Last Name</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input name="last_name" placeholder="Last Name" class="form-control"  type="text">
          </div>
        </div>
      </div>
     
   
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label">Phone #</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
            <input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
          </div>
        </div>
      </div>
     
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label">Address</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
            <input name="address" placeholder="Address" class="form-control" type="text">
          </div>
        </div>
      </div>
     
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label">City</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
            <input name="city" placeholder="city" class="form-control"  type="text">
          </div>
        </div>
      </div>
     
      <!-- Select Basic -->
     
      <div class="form-group">
        <label class="col-md-4 control-label">State</label>
        <div class="col-md-6 selectContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
            <select name="state" class="form-control selectpicker" >
              <option value=" " >Please select your state</option>
              <option>Alabama</option>
              <option>Alaska</option>
              <option >Arizona</option>
              <option >Arkansas</option>
              <option >California</option>
              <option >Colorado</option>
              <option >Connecticut</option>
              <option >Delaware</option>
              <option>Wisconsin</option>
              <option >Wyoming</option>
            </select>
          </div>
        </div>
      </div>
     
      <!-- Text input-->
     
      <div class="form-group">
        <label class="col-md-4 control-label">Zip Code</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
            <input name="zip" placeholder="Zip Code" class="form-control"  type="text">
          </div>
        </div>
      </div>
     
        <!-- Text area -->
     
      <div class="form-group">
        <label class="col-md-4 control-label">About </label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
            <textarea class="form-control" name="comment" placeholder="About "></textarea>
          </div>
        </div>
      </div>
     
   
       </fieldset>
        <legend> Account information </legend>
        <fieldset>
        <!-- Text input-->
      <div class="form-group">
        <label class="col-md-4 control-label">E-Mail</label>
        <div class="col-md-6  inputGroupContainer">
          <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
            <input name="email" placeholder="E-Mail Address" class="form-control"  type="text">
          </div>
        </div>
      </div>
     
   
        <div class="form-group has-feedback">
            <label for="password"  class="col-md-4 control-label">
                    Password
                </label>
                <div class="col-md-6  inputGroupContainer">
                <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
            <input class="form-control" id="userPw" type="password" placeholder="password"
                       name="password" data-minLength="5"
                       data-error="some error"
                       required/>
                <span class="glyphicon form-control-feedback"></span>
                <span class="help-block with-errors"></span>
                </div>
             </div>
        </div>
   
        <div class="form-group has-feedback">
            <label for="confirmPassword"  class="col-md-4 control-label">
                   Confirm Password
                </label>
                 <div class="col-md-6  inputGroupContainer">
                <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
            <input class="form-control {$borderColor}" id="userPw2" type="password" placeholder="Confirm password"
                       name="confirmPassword" data-match="#confirmPassword" data-minLength="5"
                       data-match-error="some error 2"
                       required/>
                <span class="glyphicon form-control-feedback"></span>
                <span class="help-block with-errors"></span>
      </div>
             </div>
        </div>
   
 
      <!-- Button -->
      <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-4">
          <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
        </div>
      </div>
    </fieldset>
  </form>

CDN files for validation support library :

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>

The JavaScript :

<script type="text/javascript">
 
   $(document).ready(function() {
    $('#reg_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
             last_name: {
                validators: {
                     stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: 'Please supply your last name'
                    }
                }
            },
           
            phone: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your phone number'
                    },
                    phone: {
                        country: 'US',
                        message: 'Please supply a vaild phone number with area code'
                    }
                }
            },
            address: {
                validators: {
                     stringLength: {
                        min: 8,
                    },
                    notEmpty: {
                        message: 'Please supply your street address'
                    }
                }
            },
            city: {
                validators: {
                     stringLength: {
                        min: 4,
                    },
                    notEmpty: {
                        message: 'Please supply your city'
                    }
                }
            },
            state: {
                validators: {
                    notEmpty: {
                        message: 'Please select your state'
                    }
                }
            },
            zip: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your zip code'
                    },
                    zipCode: {
                        country: 'US',
                        message: 'Please supply a vaild zip code'
                    }
                }
            },
comment: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description about yourself'
                    }
                    }
                 },
email: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your email address'
                    },
                    emailAddress: {
                        message: 'Please supply a valid email address'
                    }
                }
            },
password: {
            validators: {
                identical: {
                    field: 'confirmPassword',
                    message: 'Confirm your password below - type same password please'
                }
            }
        },
        confirmPassword: {
            validators: {
                identical: {
                    field: 'password',
                    message: 'The password and its confirm are not the same'
                }
            }
         },
            
            }
        })
 
        .on('success.form.bv', function(e) {
            $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
                $('#reg_form').data('bootstrapValidator').resetForm();

            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
});

</script>

Comments

  1. atif anwar25 October 2016 at 23:39

    this video for form validater
    https://www.youtube.com/watch?v=jZg1wDmPKRg

    ReplyDelete
  2. atif anwar27 October 2016 at 07:04

    ctrl+alt+shift+s for image size decreasing

    ReplyDelete
  3. atif anwar1 November 2016 at 00:43

    https://www.youtube.com/watch?v=kU3Hk6ahCmg this link for WordPress installation

    ReplyDelete
  4. atif anwar30 November 2016 at 06:00

    https://www.ntu.edu.sg/home/ehchua/programming/webprogramming/jsdemo/JSFormValidation.html for validater

    ReplyDelete

Post a Comment

Popular posts from this blog

What is an operator? An  operator  is an object that is capable of manipulating a value.  For example, in "1 + 2", the "1" and "2" are the operands and the plus symbol is the operator.  JavaScript supports the following types of operators.   Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators
Read more
Use of page.php in WordPress. Display page title and page content. Display comment list and comment form (unless comments are off). Include  wp_link_pages()  to support navigation links within a page. Metadata such as tags, categories, date and author should not be displayed. Display an "Edit" link for logged-in users with edit permissions. Use of single.php in WordPress. Include  wp_link_pages()  to support navigation links within a post. Display post title and post content. Display the post date. Display the author name (if appropriate). Display post categories and post tags. Display an "Edit" link for logged-in users with edit permissions. Display comment list and comment form. Show navigation links to next and previous post using  previous_post_link()  and  next_post_link() . Use of function.php in WordPress. The functions file behaves like a  WordPress Plugin , adding features and functionality to a WordPress site....
Read more

Bootstrap Breakpoints

  // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media ( min-width : 576px ) { ... } // Medium devices (tablets, 768px and up) @media ( min-width : 768px ) { ... } // Large devices (desktops, 992px and up) @media ( min-width : 992px ) { ... } // Extra large devices (large desktops, 1200px and up) @media ( min-width : 1200px ) { ... } // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up ( sm ) { ... } @include media-breakpoint-up ( md ) { ... } @include media-breakpoint-up ( lg ) { ... } @include media-breakpoint-up ( xl ) { ... } // Extra small devices (portrait phones, less than 576px) @media ( max-width : 575 .98px ) { ... } // Small devices (landscape phones, less than 768px) @media ( max-width : 767 .98px ) { ... }...
Read more