How can I validate a form that i had created using bootstrap 3?

Question

I want to achieve this and validate every element so none with left blank :

First name – with characters only

Last name – characters, hyphens and apostrophes only

Email – valid email addresses

Zip code – US zip validation

US States – a drop down list of states

This is my html code:

           <section>
          <div class="container form-container col-lg-12">
          <form class="form_data" role="form" id="needs-validation" novalidate>
         <h1 class="text-center"> Contact us </h1>
         <div class="form-group center-block">
          <label for="input--email" class="form-labels">Email address</label>
             <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com">
            <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
             <div class="alert-feedback">
      Please provide a valid email.
             </div>
      </div>
         <div class="form-group center-block">
          <label for="inputName" class="form-labels">name</label>
           <input type="text" name="name"  pattern="[a-zA-Z]+" class="form-control form-
                control-lg" placeholder="Norman Geller" required="true" id="input--name">
           <div class="alert-feedback">
      Please input your name.
    </div>
        </div>
       <div class="form-group center-block">
       <label for="inputZipCode" class="form-labels"> Zip code</label>
       <input type="number" min="5" max="5" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required="true" id="input--zip">
      <div class="alert-feedback">
      Please input your zip.
    </div>

Have you looked into simple solutions such as jQuery's Validate plugin? https://jqueryvalidation.org/ — Patrick, Jan 14 '18 at 02:07
Don't forget that JS validation can easily be bypassed. Convenient for the user sure, but should also be done on the other end — hexYeah, Jan 14 '18 at 02:13
If you want more control you can use regex to validate each input or if you want a quick win, like Patrick said, jQuery's validate plugin is fast and simple to use. There are a lot of options out there. Here is a bootstrap specific one called Bootstrap Validator for Bootstrap 3, https://github.com/1000hz/bootstrap-validator. But hexYeah hit it right on the nose. Validation should not only be handled on the front end. — Jon Lambson, Jan 14 '18 at 03:56
I had being trying to use bootstrap validator but is not working ... it says bad identifier dont know why ... $(document).ready(function(){ $(".contact-form").bootstrapValidator({ message : "This value is invalid" feedBackIcons — manAbl, Jan 14 '18 at 04:34

score 2 · Answer 1 · answered Jan 15 '18 at 01:23

2

I recommend using Parsley.js for form validation. Basic usage:

First include jQuery (>= 1.8) and Parsley.
Then, simply use $('form').parsley();
Add required attribute to your input fields which will be validated.

Here is a fiddle based on your code.

answered Jan 15 '18 at 01:23

N'Bayramberdiyev

5,936
7
27
47

Jon Lambson · Accepted Answer · 2018-01-14T06:01:28.737

I believe you are activating validation incorrectly. Using your code example above, Activate validation via JavaScript: $('#needs-validation').validator();

Then in your hmtl, just add your desired patterns to the inputs. You will need to add styling or classes to match bootstraps errors.

<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" data-toggle="validator">
      <h1 class="text-center"> Contact us </h1>
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com" data-error="Please provide a valid email." required>
        <div class="help-block with-errors"></div>
        <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
      </div>
      <div class="form-group center-block">
        <label for="inputName" class="form-labels">name</label>
        <input type="text" name="name"  pattern="[a-zA-Z]+" data-pattern-error="Characters only." class="form-control form-
        control-lg" placeholder="Norman Geller" required id="input--name">
      <div class="help-block with-errors"></div>
      </div>
      <div class="form-group center-block">
        <label for="inputZipCode" class="form-labels"> Zip code</label>
        <input type="text" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required id="input--zip" data-bv-integer="true" pattern="^[0-9]+$" data-pattern-error="Numbers only">
      <div class="help-block with-errors"></div>
      </div>
      <button type="submit">
      submit
      </button>
    </form>
  </div>
</section>

Here is a jsfiddle. I didn't write the US zip validation for you, but here is a good place to get started ZIP Code (US Postal Code) validation

This doesn't solve the problem ... the console keep saying that validator() is not a function... I think the thing is than I'm not loading the files correctly but I really dont know. I'll try to change the things a little bit and see what happens ... This is stressing me out. I have 2 days trying to do it :s — manAbl, Jan 14 '18 at 14:59
Do you have your code posted on github or somewhere I can take a look? Maybe seeing your code I can help you get to a solution quicker than just playing a guessing game. — Jon Lambson, Jan 14 '18 at 21:39

How can I validate a form that i had created using bootstrap 3?

2 Answers2