Convalida del module Javascript

Sto cercando di capire quale sarebbe il modo più semplice per validationre i campi obbligatori senza wherer fare un'istruzione if per each nome di ciascun elemento. Forse solo con un ciclo e verificare la sua class.

Quello che sto cercando di eseguire è controllare solo quelli che hanno il nome della class come "necessari"

<input name="a1" class="required" type="text" /> <input name="a2" class="" type="text" /> <input name="a3" class="required" type="text" /> 

Grazie

Non sono affatto contro le librerie suggerite da altri, ma ho pensato che potresti desiderare alcuni esempi di come potresti farlo da solo, spero che aiuta.

Questo dovrebbe funzionare:

 function validate() { var inputs = document.getElementsByTagName("input"); for (inputName in inputs) { if (inputs[inputName].className == 'required' && inputs[inputName].value.length == 0) { inputs[inputName].focus(); return false; } } return true; } 

Permetta anche di dire che i tuoi input sono in un module denominato "theForm":

 function validate() { for (var i = 0; i < theForm.elements.length; i++) { if (theForm.elements[i].className == "required" && theForm.elements[i].value.length == 0) { theForm.elements[i].focus(); return false; } } return true; } 

Ovviamente si potrebbe trarre il valore e / o aggiungere la logica di validation appropriata per l'applicazione, ma sono sicuro che puoi get l'idea dal campione.

È inoltre ansible memorizzare dati arbitrari sull'input stesso e leggerlo utilizzando il metodo getAttribute() sull'elemento. Ad esempio si potrebbe avere questo elemento nel tuo html (regex richiede un numero a 3 cifre):

 <input name="a1" validate="true" regex="[0-9]{3}" type="text" /> 

è ansible utilizzare questo metodo per eseguire la regex nella routine di validation.

 function validate() { for (var i = 0; i < theForm.elements.length; i++) { var elem = theForm.elements[i]; if (elem.getAttribute("validate") == "true") { if (!elem.value.match(elem.getAttribute("regex"))) { elem.select(); return false; } } } return true; } 

Spero che questo ti aiuti.

Utilizzo il plugin di validation jQuery. Funziona veramente bene e si adatta al tuo desiderio dichiarato di avere bisogno solo di attributi di class.

  $(document).ready( function() { $('form').validate(); }); 

Tutto ciò che serve per impostare la validation dopo aver contrassegnato i campi obbligatori.

Ti consiglio di utilizzare questo selettore di css basato su javascript che otterrà tutti gli elementi di una class specifica. Validare la forma proprio come il modo in cui hai accennato.

Un model per questo che ho usato per lungo tempo e che mi ha servito bene è avvolgere il controllo con un DIV o P e segnare come necessario.

 <div class="form-text required"> <label for="fieldId">Your name</label> <input type="text" name="fieldName" id="fieldId" value="" /> </div> 

Questo significa che posso scegliere i campi necessari per validationre facilmente con un selettore CSS.

 .required input, .required select 

In jQuery, è ansible testare l'input con qualcosa di simile:

 $('form').submit(function(){ var fields = $(this).find('input, textarea, select'); // get all controls fields.removeClass('invalid'); // remove var inv = $(this).find('input[value=""], select[value=""]'); // select controls that have no value if (inv.length > 0) { inv.addClass('invalid'); // tag wrapper return false; // stop form from submitting } // else we may submit }); 

Nel semplice Javascript sarebbe più che mi impegnavo a digitare, ma seguendo le righe di:

 var badfields = []; var fields = theForm.getElementsByTagName('input'); for (var i=0; i< fields.length; i++ ) { if ( fields[i] && fields[i].parentNode && fields.value == '' && /(^| )required( |$)/.test( fields[i].parentNode.className ) ) { badfields.push( fields[i] ); } } // badfields.length > 0 == form is invalid 

Il vantaggio più immediato di avvolgere l'etichetta e l'input (e facoltativamente: text suggerito, errore …) come un "set" di controllo in questo modo è che è ansible applicare stili CSS sull'input e l'etichetta insieme.

 .required input, .required select { border : 1px solid red; } .required label { color : #800; } .invalid input, .invalid select { background-color : #f88; } 

Suggerisco di utilizzare una soluzione pronta per la tua validation di moduli in quanto le cose possono rapidamente aggiungere: Come verificherai le caselle di controllo? Le caselle di controllo possono essere richieste? (EULA?) Che cosa su questi pulsanti, come controllerai questi?

La maggior parte delle soluzioni di validation fornirà anche lo zucchero come la verifica dei dati corretti (ad esempio, indirizzi e-mail) piuttosto che controllare se è presente.

Sono un po 'sorpreso che nessuno abbia detto YUI. È ansible utilizzare il metodo getElementsByClassName di class Dom nel modo seguente:

 var aElements = YAHOO.util.Dom.getElementsByClassName('required', 'input'); for (var i = 0; i < aElements.length; i++) { // Validate } 

Altre informazioni sul metodo sono disponibili qui e altre informazioni generali sono qui