2017-09-11 1 views
0

Ich habe diesen Eingang:Bootstrap-Validator E-Mail notempty

<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)"> 

ich dieses Skript verwenden es zu überprüfen:

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

Es funktioniert gut, aber wenn ich die Eingabe zu löschen, aber es zeigt, dass es noch gültig. Dies ist nur ein Show-Problem, weil ich das Formular nicht senden kann, wenn es leer ist.

enter image description here

Hier habe ich die Validate-Regeln:

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

Können Sie den gesamten HTML/JS posten, die Sie bisher noch jede JSFiddle geschrieben haben? –

+0

ein JSFIDDLE wäre hilfreich. –

+0

https://jsfiddle.net/23y8cL3g/ –

Antwort

1

Hoffnung, das hilft.

$(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>

+0

Also das Problem war die Funktion, die ich verwendete. Danke: D –

Verwandte Themen