引導驗證電子郵件notempty

Question

我有這個輸入：

<input type="text" name="email" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="email" aria-required="true" aria-invalid="false" required placeholder="E-mail (obligatoriu)"> 

我使用這個腳本來驗證它：

  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script> 

它運作良好，但是當我清除輸入，但它表明，仍然是有效。 這只是一個表演問題，因爲如果它是空的，它不會讓我發送表單。

在這裏，我有驗證規則：

    email: { 
        validators: { 
         notEmpty: { 
          message: 'Adresa de email este un camp obligatoriu' 
         }, 
         emailAddress: { 
          message: 'Adresa de email nu este corecta' 
         } 
        } 
       }, 

Answer 1

希望這有助於。

$(document).ready(function() { 
 
\t $('#cereForm').bootstrapValidator({ 
 
\t \t message: 'This value is not valid', 
 
\t \t feedbackIcons: { 
 
\t \t \t valid: 'glyphicon glyphicon-ok', 
 
\t \t \t invalid: 'glyphicon glyphicon-remove', 
 
\t \t \t validating: 'glyphicon glyphicon-refresh' 
 
\t \t }, 
 
\t \t fields: { 
 
\t \t \t nume: { 
 
\t \t \t \t validators: { 
 
\t \t \t \t \t notEmpty: { 
 
\t \t \t \t \t \t message: 'Numele este un camp obligatoriu' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t email: { 
 
\t \t \t \t validators: { 
 
\t \t \t \t \t notEmpty: { 
 
\t \t \t \t \t \t message: 'Email address is mandatory' 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t emailAddress: { 
 
\t \t \t \t \t \t message: 'The input is not a valid email address' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t telefon: { 
 
\t \t \t \t validators: { 
 
\t \t \t \t \t phone: { 
 
\t \t \t \t \t \t country: 'RO', 
 
\t \t \t \t \t \t message: 'Acest numar de telefon nu este corect' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t mesaj: { 
 
\t \t \t \t validators: { 
 
\t \t \t \t \t notEmpty: { 
 
\t \t \t \t \t \t message: 'The content is required and cannot be empty' 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t stringLength: { 
 
\t \t \t \t \t \t max: 500, 
 
\t \t \t \t \t \t message: 'Mesajul este prea lung' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t } 
 
\t }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script> 
 

 
<form id="cereForm"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-6 col-md-6"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <span class="wpcf7-form-control-wrap nume"> 
 
\t \t \t \t \t <input type="text" name="nume" value="" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="nume" aria-required="true" aria-invalid="false" placeholder="Nume (obligatoriu)"> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <span class="wpcf7-form-control-wrap email"> 
 
\t \t \t \t \t <input type="text" name="email" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="email" placeholder="E-mail (obligatoriu)"> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <span class="wpcf7-form-control-wrap telefon"> 
 
\t \t \t \t \t <input type="telefon" name="telefon" value="" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="telefon" aria-required="true" aria-invalid="false" placeholder="Telefon"> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="labelformular">De la:</label> 
 
\t \t \t \t <div class="input-group date datepicker" id="data1" data-date-format="dd-mm-yyyy"> 
 
\t \t \t \t \t <input class="wpcf7-form-control wpcf7-text form-control input-lg data1" name="data1" type="text" readonly /> 
 
\t \t \t \t \t <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <p></p> 
 
\t \t </div> 
 
\t \t <div class="col-sm-6 col-md-6"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <span class="wpcf7-form-control-wrap mesaj"> 
 
\t \t \t \t \t <textarea type="text" name="mesaj" class="wpcf7-form-control wpcf7-text form-control input-lg mesaj" id="mesaj" aria-required="true" aria-invalid="false" placeholder="Mesaj"></textarea> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="labelformular">Pana la:</label> 
 
\t \t \t \t <div class="input-group date datepicker" data-date-format="dd-mm-yyyy"> 
 
\t \t \t \t \t <input class="wpcf7-form-control wpcf7-text form-control input-lg data2" name="data2" type="text" readonly /> 
 
\t \t \t \t \t <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12 col-md-12"> 
 
\t \t \t <input type="submit" value="Trimite mesaj" class="wpcf7-form-control wpcf7-submit"> 
 
\t \t </div> 
 
\t </div> 
 
</form>