Bootstrap Form validation

Code Example: https://github.com/Sudarshan101/BootstrapFormValidation

See Demo : https://www.youtube.com/watch?v=MY7Nqr9dDn4

we have to add CSS and js of bootstrap in our project. you can download CSS and js of bootstrap from the here: https://getbootstrap.com/docs/3.3/. And for the validation, we have to add validation JS below of the bootstrap JS. Click on the below link for validation JS download

Required field validation

for the required any field add "required" attribute in the field

HTML Code

<form data-toggle="validator" role="form">
   <div class="form-group">
  <label class="control-label" for="name">Name
  <input type="text" class="form-control" id="name" placeholder="Enter your name" required />
  <div class="help-block with-errors"></div>
   </div>
   <button type="submit" class="btn btn-default">Submit
</form>

For the bootstrap validation, we have to add  

data-toggle="validator"

  and   

role="form"

   in the form tag. and use "form-group" class parent for a field. And "form-control" class in the field. And if you want to change effect on label tag then you have to add "control-label" class in the label tag. and for the error message this

<div class="help-block with-errors"></div>

div end of the field, inside the parent div. You can also set information in this div if you want

formate validation

for the set formate in any field ,we have to add "pattern" attribute in the field according to our requirement.

html Code

<form data-toggle="validator" role="form">
   <div class="form-group">
  <label class="control-label" for="name">Name
  <input type="text" pattern="^[_A-z0-9]{1,}$" class="form-control" id="name" placeholder="Enter your name" required />
  <div class="help-block with-errors"></div>
   </div>
   <button type="submit" class="btn btn-default">Submit
</form>

For the format validation, we have to add  

pattern="^[_A-z0-9]{1,}$"

 . If you want to set limit then you have to add min limit or maximize attributes 

minlength="6"

   and   

maxlength="15"

 in the field.

Some Other patterns

For the Number formate

pattern="[0-9]+$"

For the email formate

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"

For the date formate

pattern="(?:(?:0[1-9]|1[0-9]|2[0-9])-(?:0[1-9]|1[0-2])|(?:(?:30)-(?!02)(?:0[1-9]|1[0-2]))|(?:31-(?:0[13578]|1[02])))-(?:19|20)[0-9]{2}"

For the Name with only one space

pattern="([a-zA-Z]+ )+[a-zA-Z]+$|^[a-zA-Z]+$"

For the Name with only one space

pattern="([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}"

Match field validation

for the Match filed we have to add

data-match="#MATCH_FIELD_ID"

 attribute in the field according to our requirement. And if you want to set error for match error you have to ad one more attribute in the field 

data-match-error="Your message for matching error"

 html Code

<form data-toggle="validator" role="form">
   <div class="form-group">
  <label class="control-label" for="Password">Password</label>
  <input type="password" data-minlength="6" class="form-control" id="Password" placeholder="Enter your name" required />
  <div class="help-block with-errors">Minimum of 6 characters</div>
   </div>
    <div class="form-group">
    <label class="control-label" for="ConfirmPassword">Confirm Password</label>
        <input type="password" class="form-control" id="ConfirmPassword" data-match="#Password" data-match-error="Whoops, Password not match" placeholder="Confirm Password" required />
        <div class="help-block with-errors"></div>
      </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

Code Example: https://github.com/Sudarshan101/BootstrapFormValidation

See Demo : https://www.youtube.com/watch?v=MY7Nqr9dDn4