2012-02-21 8 views
25

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)Aggiunta di regole di convalida jQuery agli elementi creati in modo dinamico in ASP

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

risposta

6

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/

+0

Ah, bene! Potrei creare un metodo personalizzato per farlo e aggiungere tutti gli attributi dei dati nel campo selezionato in una volta sola. –

+4

Anche nel JSFiddle non funziona. – Gabriel

51

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"); 
+1

5,5 anni più tardi, funziona ancora come un campione quando l'iniezione di nuove viste parziali in un'interfaccia editore. – Tommy

1

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' 
     } 
    } 
);​ 
+0

Vero, ma non hai aggiunto un riferimento al plug-in Non valido di convalida: sembra che si tratti del problema. L'ho aggiornato per includere questo: http: // jsfiddle.net/LNjtd/1/ –

+0

Huh, non solo, ti ho inviato il link al jsfiddle sbagliato :) – Ryley

+0

Ma anche, non ho capito che il plugin discreto era correlato, e non so nulla su come ASP.NET genera le sue forme e poi le usa ... quindi sì, sei da solo e sembra che tu abbia trovato una soluzione praticabile. – Ryley