форма проверки не работает в начальной загрузки выберите опцию живой поиск

Question

форма проверки не работает в моей выберите вариант живого поиска, но успешно проверен

<div class="form-group"> 
       <div class="col-sm-12"><label>Access Level</label> 
     <select class="form-control selectpicker" name="access" data-live-search="true" required><option value="">--Select--</option> 
       <option value="0">Yes</option> 
       <option value="1">No</option> 
      </select></div> 
      </div> 
    <script> 
    $('form').bootstrapValidator({ 
      message: 'This value is not valid', 

      fields: { 
       access: { 
        validators: { 
         notEmpty: { 
          message: 'The First Name is required' 
         } 
        } 
       }, 

      } 

     }).on('success.form.bv', function(e,data){ 
      e.preventDefault(); // don't send form (demo only) 
     }); 

    </script> 

Любой один текстового поля, помогите мне пожалуйста.

Answer 1

Похоже синтаксической ошибки

Проверить демо here

HTML:

<div class="container"> 

    <form class="well form-horizontal" action=" " method="post" id="contact_form"> 
    <fieldset> 

     <!-- Form Name --> 
     <legend>Contact Us Today!</legend> 

     <!-- Text input--> 

     <div class="form-group"> 
     <label class="col-md-4 control-label">First Name</label> 
     <div class="col-md-4 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-4 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">E-Mail</label> 
     <div class="col-md-4 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> 


     <!-- Text input--> 

     <div class="form-group"> 
     <label class="col-md-4 control-label">Phone #</label> 
     <div class="col-md-4 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-4 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-4 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-4"> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> 
      <select name="state" class="form-control" required> 
     <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 >District of Columbia</option> 
     <option> Florida</option> 
     <option >Georgia</option> 
     <option >Hawaii</option> 
     <option >daho</option> 
     <option >Illinois</option> 
     <option >Indiana</option> 
     <option >Iowa</option> 
     <option> Kansas</option> 
     <option >Kentucky</option> 
     <option >Louisiana</option> 
     <option>Maine</option> 
     <option >Maryland</option> 
     <option> Mass</option> 
     <option >Michigan</option> 
     <option >Minnesota</option> 
     <option>Mississippi</option> 
     <option>Missouri</option> 
     <option>Montana</option> 
     <option>Nebraska</option> 
     <option>Nevada</option> 
     <option>New Hampshire</option> 
     <option>New Jersey</option> 
     <option>New Mexico</option> 
     <option>New York</option> 
     <option>North Carolina</option> 
     <option>North Dakota</option> 
     <option>Ohio</option> 
     <option>Oklahoma</option> 
     <option>Oregon</option> 
     <option>Pennsylvania</option> 
     <option>Rhode Island</option> 
     <option>South Carolina</option> 
     <option>South Dakota</option> 
     <option>Tennessee</option> 
     <option>Texas</option> 
     <option> Uttah</option> 
     <option>Vermont</option> 
     <option>Virginia</option> 
     <option >Washington</option> 
     <option >West Virginia</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-4 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 input--> 
     <div class="form-group"> 
     <label class="col-md-4 control-label">Website or domain name</label> 
     <div class="col-md-4 inputGroupContainer"> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span> 
      <input name="website" placeholder="Website or domain name" class="form-control" type="text"> 
      </div> 
     </div> 
     </div> 

     <!-- radio checks --> 
     <div class="form-group"> 
     <label class="col-md-4 control-label">Do you have hosting?</label> 
     <div class="col-md-4"> 
      <div class="radio"> 
      <label> 
            <input type="radio" name="hosting" value="yes" /> Yes 
           </label> 
      </div> 
      <div class="radio"> 
      <label> 
            <input type="radio" name="hosting" value="no" /> No 
           </label> 
      </div> 
     </div> 
     </div> 

     <!-- Text area --> 

     <div class="form-group"> 
     <label class="col-md-4 control-label">Project Description</label> 
     <div class="col-md-4 inputGroupContainer"> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 
      <textarea class="form-control" name="comment" placeholder="Project Description"></textarea> 
      </div> 
     </div> 
     </div> 

     <!-- Success message --> 
     <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</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> 
</div> 
</div> 
<!-- /.container --> 

JS:

$(document).ready(function() { 
    $('#contact_form').bootstrapValidator({ 

     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' 
      } 
      } 
     }, 
     email: { 
      validators: { 
      notEmpty: { 
       message: 'Please supply your email address' 
      }, 
      emailAddress: { 
       message: 'Please supply a valid email address' 
      } 
      } 
     }, 
     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 of your project' 
      } 
      } 
     } 
     } 
    }) 

    });