Aggiunta di regole di convalida jQuery agli elementi creati in modo dinamico in ASP

Question

Ho alcuni campi modulo dinamicamente inseriti in una pagina in un progetto MVC3. Normalmente dovremmo aggiungere la convalida jQuery sul lato server, ma in questo caso non possiamo (più campi nell'interfaccia utente generare il valore per un campo nascosto - e questo è ciò che viene inviato. Non possiamo validare contro un campo nascosto, quindi dobbiamo invece aggiungere convalida UI-solo per i campi l'utente può vedere)

Una volta che i campi sono aggiunti dinamicamente alla pagina, ho eseguito il seguente codice sopra il contenitore:

$container.find(".date").rules("add", { 
    required: true, 
    messages: { 
     required: "The date is required" 
    } 
}); 

ma doesn funziona! Stranamente, disabilitando il codice precedente, creando gli elementi dinamici, quindi eseguendo il codice nella console JS del browser, funziona solo il messaggio di convalida predefinito.

Sono in perdita. Qualche idea?

Sto usando jQuery convalida 1.9.0 & il plugin discreto

Answer 1

Ora che ho capito quello che sta succedendo con il lato plug discreto delle cose (che Capisco che sia collegato ad ASP.NET in qualche modo), ecco cosa devi fare:

Dopo aver aggiunto il tuo nuovo elemento, chiama $.validator.unobtrusive.parseElement(newElement) e verrà aggiunto al modulo. Come suggerito dalla tua risposta, devi impostare gli attributi data-val e data-val-required nel nuovo elemento del modulo.

Così si finisce con questo:

//create new form element 
$('form fieldset').append('<br>New Field: '+ 
    '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+ 
    ' * Also required'); 

//add new rules to it 
$.validator.unobtrusive 
    .parseElement($('form').find('input[name="newField"]').get(0)); 

illustrato di seguito: http://jsfiddle.net/ryleyb/LNjtd/2/

Answer 2

Come si è visto, questo può essere fatto per lo più in HTML con l'aggiunta di un paio di attributi per ciascun elemento del modulo:

• A name attribuire
• data-val="true"
• data-val-required="message"

Come così:

<input type='text' name="date" data-val="true" data-val-required="A date is required." /> 

Poi il modulo ha solo bisogno di essere ri-analizzato tramite JS:

//Remove current form validation information 
$("form") 
    .removeData("validator") 
    .removeData("unobtrusiveValidation"); 

//Parse the form again 
$.validator 
    .unobtrusive 
    .parse("form"); 

Answer 3

penso che tu avessi qualcosa di più semplice sbagliato - come il vostro find('.date') non era in realtà trovando nulla. Perché altrimenti, il tuo codice mi sembra abbastanza ragionevole. Ecco un esempio di farlo funzionare come previsto: http://jsfiddle.net/ryleyb/LNjtd/

ero in grado di convalidare il codice correttamente con questo:

$('form fieldset') 
    .append('<br>New Field: <input type="text" name="newField"> * Also required') 
    .find('input[name="newField"]').rules('add', { 
     required: true, 
     messages: { 
     required: 'New field is required' 
     } 
    } 
);​