Come posso aggiungere, rimuovere o scambiare le regole di convalida jQuery da una pagina?

Question

Nota:
Questa domanda si riferisce a una versione molto vecchia di jQuery.validate() (versione 1.5). Questo plug-in fornisce ora una soluzione integrata per fare questo: lo .rules() method che dovrebbe essere usato al suo posto. Lascio questa domanda e rispondo nella sua forma originale per scopi storici a chiunque abbia bisogno di mantenere un sito legacy che non è in grado di eseguire l'aggiornamento alle ultime versioni di jQuery e jQuery.validate().

---

Ho un modulo che commuta ciò che gli elementi di input sono visibili. Voglio convalidare solo gli elementi visibili nel modulo.

Sto avendo difficoltà a farlo funzionare correttamente. Voglio disabilitare i validatori per gli elementi non visibili e non riesco a capire il modo migliore per farlo. Qualche idea su cosa potrebbe essere sbagliato nel mio codice, o il mio approccio sarebbe apprezzato.

Quando la visibilità è attivata, ho provato un paio di cose:

• Calling $("form").rules("remove") per cancellare tutte le regole di convalida esistenti. Ciò genera un'eccezione JavaScript "non definita".
• Chiamare $("form").validation(...options...) per gli elementi visibili, sperando che questo sovrascriva le regole. Ciò consente solo al primo gruppo che è convalidato di funzionare. Il secondo pannello non può essere convalidato.
• Disattivare il gestore di invio prima di chiamare il nuovo metodo validation(). Questo non ha fatto quello che avrei pensato. Rimuove tutte le convalide (apparentemente) in modo permanente e il modulo viene inviato senza convalida.
• Cancellare l'oggetto di convalida con $.removeData($('form'), 'validator') prima di provare a chiamare di nuovo il validatore. Anche questo non funziona.
• Questo è in un sito ASP.NET, quindi l'utilizzo di più tag <form /> è fuori questione dal momento che potrebbe interrompere la pagina.

Sono un po 'perplesso su come posso fare questo lavoro. Puoi vedere una demo completa di quello che ho a http://jsbin.com/ucibe3 o modificarla allo http://jsbin.com/ucibe3/edit. Ho provato a ridurlo a solo il codice che causa il bug.

Qui sono i pezzi chiave del mio codice (uso sopra i link per la pagina di lavoro completo)

HTML:

<td id="leftform"> 
    Left Form<br /> 
    Input 1: <input type="text" name="leftform_input1" /><br /> 
    Input 2: <input type="text" name="leftform_input2" /><br /> 
    <input type="submit" name="leftform_submit" value="Submit Left" /> 
</td> 
<td id="rightform" style="visibility:hidden"> 
    Right Form<br /> 
    Input 1: <input type="text" name="rightform_input1" /><br /> 
    Input 2: <input type="text" name="rightform_input2" /><br /> 
    <input type="submit" name="rightform_submit" value="Submit Right" /> 
</td> 

JavaScript:

$('#toggleSwitch').click(function() { 
    if ($('#leftform').css("visibility") !== "hidden") { 
     $('#leftform').css("visibility", "hidden"); 
     $('#rightform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     $('#rightform').css("visibility", "hidden"); 
     $('#leftform').css("visibility", "visible"); 
     $('form').validate({ 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 1

preavviso obsoleto:
Questa risposta si riferisce ad un estremamente vecchia versione del plug-in jQuery.validate() (versione 1.5) ed è ormai obsoleto come il plugin fornisce un'API ufficiale per risolvere questo problema. Vedere lo .rules() documentation per l'approccio attuale alla risoluzione di questo problema. Sto lasciando questa risposta così com'è per aiutare chiunque debba mantenere un sito legacy che non è in grado di eseguire l'aggiornamento alle ultime versioni di jQuery e jQuery.validate().

---

Questo utilizza una caratteristica del validatore che non è ben documentate nella API (e con questo intendo non è documentato affatto), ma poiché è una parte fondamentale di come funziona il validatore, non è probabile che venga rimosso anche se non è documentato.

Una volta inizializzato il validatore jQuery, è possibile ottenere nuovamente l'accesso all'oggetto validatore chiamando il metodo validate() sull'oggetto modulo su cui è stato applicato il validatore. Questo oggetto validatore ha una proprietà settings, che memorizza le impostazioni predefinite, combinate con le impostazioni applicate in fase di inizializzazione.

Supponendo inizializzo il validatore come questo:

$('form').validate({ 
    rules: { 
     leftform_input1: { required: true }, 
     leftform_input2: { required: true } 
    }, 
    messages: { 
     leftform_input1: "Field is required", 
     leftform_input2: "Field is required" 
    } 
}); 

Posso quindi ottenere quelle impostazioni esatte fuori dal validatore effettuando le seguenti operazioni:

var settings = $('form').validate().settings; 

Posso quindi facilmente lavorare con queste impostazioni oggetto per aggiungere o rimuovere validatori per il modulo.

Questo è come si dovrebbe rimuovere le regole di convalida:

var settings = $('form').validate().settings; 
delete settings.rules.rightform_input1; 
delete settings.messages.rightform_input1; 

e questo è come si dovrebbe aggiungere le regole di convalida:

var settings = $('form').validate().settings; 
settings.rules.leftform_input1 = {required: true}; 
settings.messages.leftform_input1 = "Field is required"; 

---

Ecco una soluzione di lavoro per lo scenario nel mio domanda. Io uso il metodo extend() di jQuery per sovrascrivere le proprietà rules e messages dell'oggetto validate, che è il modo in cui si alterna tra i due pannelli.

$('#toggleSwitch').click(function() { 
    var settings = $('form').validate().settings; 
    var leftForm = $('#leftform'); 
    var rightForm = $('#rightform'); 

    if (leftForm.css("visibility") !== "hidden") { 
     leftForm.css("visibility", "hidden"); 
     rightForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       rightform_input1: { required: true }, 
       rightform_input2: { required: true } 
      }, 
      messages: { 
       rightform_input1: "Field is required", 
       rightform_input2: "Field is required" 
      } 
     }); 
    } else { 
     rightForm.css("visibility", "hidden"); 
     leftForm.css("visibility", "visible"); 
     $.extend(settings, { 
      rules: { 
       leftform_input1: { required: true }, 
       leftform_input2: { required: true } 
      }, 
      messages: { 
       leftform_input1: "Field is required", 
       leftform_input2: "Field is required" 
      } 
     }); 
    } 
}); 

Answer 2

Mentre ci sono altri modi per farlo questo ASP.net ti consente di utilizzare più tag form purché non siano tutti sottoposti a rendering, quindi se utilizzi una visualizzazione multipla per visualizzare solo i contenuti pertinenti puoi utilizzare più moduli.

Si tende a ripulire la convalida e inviare la gestione un po '.

---

alternativa jquery fa permettono: visibile da aggiungere al vostro selettore, così si potrebbe potenzialmente essere eseguito solo il selettore su elementi visibili e aggirare il problema in questo modo a seconda di come sono nascosti.

Come: visibile viene calcolato è stato modificato in jQuery 1.3.2. Elemento assunto come visibile se esso ei suoi genitori consumano spazio nel documento. La visibilità CSS non viene presa in considerazione. Le note di rilascio delineano le modifiche in maggiore dettaglio.

---

Ecco una migliore/soluzione più semplice da un altro post sulla pila overflow-

A quanto pare il plug-in di convalida permette di specificare: visibile nelle regole. Ecco il post

Advanced JQuery Validation: Avoiding Validations on Certain Conditions

Answer 3

Le "richieste" dichiarazioni all'interno del hash validate.rules non devono essere dichiarati in modo statico come "vera". In realtà è possibile fornire una funzione anonima che può controllare la visibilità di qualcosa e restituire vero o falso a seconda della risposta.

$('form').validate({ 
rules: { 
    rightform_input1: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } }, 
    rightform_input2: { 
    required: function(){ 
       return $('#leftform').css("visibility") !== "hidden" 
       } } 
    } 
}); 

Answer 4

$('#form_id').validate();//empty rules 
//add rules/message to form element 
$('#form_id #inputId').rules("add", { 
    required  : true,        
    messages  : { 
     required : 'Add your required message' 
    } 
}); 

Answer 5

Ho scritto piccola funzione per le regole editting (necessario solo).

 $.editRules = function($array, $type) { 
      var settings = $('#signupForm').validate().settings; 
      $.each($array, function($k, $v) { 
       settings.rules[$v] = {required: ($type == 'add' ? true : false)}; 
      }); 
     }; 

Answer 6

Se si desidera chiamare convalidare di nuovo con nuove impostazioni (regole, messaggi ecc ...) chiamata

$('#formid').removeData('validator') 

Questo eliminerà convalida per la forma poi inizializzare di nuovo con il nuovo impostazioni