La convalida del modulo Bootstrap convalida tutti i campi all'interno dello stesso gruppo di moduli

Question

Ho riscontrato un problema durante la convalida del modulo.

mio HTML è:

<div class="form-group required"> 
    <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label> 
    <div class="col-xs-12 col-sm-9 col-md-9"> 
     <input type="text" class="form-control" name="address1" id="address1"> 
     <label for="address1" class="control-label control-label-under">Address 1</label> 
    </div> 
</div> 

<div class="form-group required"> 
    <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2"> 
     <input type="text" class="form-control" name="address_city" id="AddressCity"> 
     <label class="control-label control-label-under" for="AddressCity">City</label> 
    </div> 
    <p class="row clearfix visible-xs-block"></p> 
    <div class="col-xs-12 col-sm-3 col-md-3 contact-state"> 
     <input type="text" class="form-control" name="address_state" id="AddressEmirate"> 
     <label class="control-label control-label-under" for="AddressEmirate">Emirate</label> 
    </div> 
    <p class="row clearfix visible-xs-block"></p> 
    <div class="col-xs-12 col-sm-3 col-md-3"> 
     <input type="text" class="form-control" name="address_zip" id="AddressPostal"> 
     <label class="control-label control-label-under" for="AddressPostal"></label> 
    </div> 
</div> 
<hr> 

e l'uscita è

Ora il problema è come ho bisogno di visualizzarli in linea in modo da li ho messi dentro stessa dal gruppo e che sta creando problemi durante la convalida.

Non ho alcuna convalida per il codice postale. Ma mentre convalida la mancata convalida della città/emirato, il codice postale viene mostrato anche in rosso. Che non voglio

La mia domanda è come visualizzarli in linea come mostrato nell'immagine ma anche tenerli in un gruppo di moduli separato in modo che la validazione non influenzi.

Answer 1

Non è difficile, può essere realizzato con la stessa struttura HTML

Motivo:postal code ingresso evidenziato rossa dove non è richiesto e nessuna regola di convalida insieme, perché è all'interno <div class="form-group required"> dove address_state e address_city sono all'interno stesso div le regole di convalida sono impostate in modo che se una di esse non è valida, viene attivata la classe di errore .has-error .form-control e viene evidenziato anche l'input postal code.

Fiddle esempio in cui l'input postal code è evidenziato in rosso ma non è stata impostata alcuna regola di convalida.

Soluzione: set di errore personalizzato selector es row: '.col-xs-12', dentro le regole di convalida in modo che sostituirà la classe di errore predefinito .has-error .form-control e solo indirizzare l'ingresso all'interno <div class="form-group required"> che ha convalida set di regole e ha errore.

More Information

Plugin Example

Fiddle esempio con selettore personalizzato

$(document).ready(function() { 
 
    $('#contactForm') 
 
     .formValidation({ 
 
     framework: 'bootstrap', 
 
     icon: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
      address_city: { 
 
       row: '.col-xs-12', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The city is required' 
 
        } 
 
       } 
 
      }, 
 
      address_state: { 
 
       row: '.col-xs-12', 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The State is required' 
 
        } 
 
       } 
 
      }, 
 
      address1: { 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The Address One required' 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script> 
 
<form id="contactForm" class="form-horizontal"> 
 
    <div class="form-group required"> 
 
     <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label> 
 
     <div class="col-xs-12 col-sm-9 col-md-9"> 
 
      <input type="text" class="form-control" name="address1" id="address1"> 
 
     </div> 
 
    </div> 
 
     
 
    <div class="form-group required"> 
 
     <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2"> 
 
      <input type="text" class="form-control" name="address_city" id="AddressCity"> 
 
      <label class="control-label control-label-under" for="address_city">City</label> 
 
     </div> 
 
      
 
     <p class="row clearfix visible-xs-block" form-group required></p> 
 
      
 
     <div class="col-xs-12 col-sm-3 col-md-3 contact-state"> 
 
      <input type="text" class="form-control" name="address_state" id="AddressEmirate"> 
 
      <label class="control-label control-label-under" for="address_state">Emirate</label> 
 
     </div> 
 
      
 
     <p class="row clearfix visible-xs-block " ></p> 
 
      
 
     <div class="col-xs-12 col-sm-3 col-md-3"> 
 
      <input type="text" class="form-control" name="address_zip" id="AddressPostal"> 
 
      <label class="control-label control-label-under"></label> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-xs-9 col-xs-offset-3"> 
 
      <button type="submit" class="btn btn-primary">Submit</button> 
 
     </div> 
 
    </div> 
 
</form>

SideNote: Dovete espandere la visualizzazione violino a sinistra, o eseguire il frammento di codice in vista a tutta pagina saranno esattamente l snapshot in questione.