Hinzufügen von jQuery-Validierungsregeln zu dynamisch erstellten Elementen in ASP

Habe ich eine dynamisch eingefügte Formularfelder auf einer Seite in einem MVC3-Projekt. Normalerweise würden wir fügen Sie die jQuery-validation-server-Seite, aber in diesem Fall können wir nicht (mehrere Felder in der Benutzeroberfläche zu generieren, die den Wert für ein hidden-Feld - und das ist das, was vorgelegt wird. Wir können nicht überprüfen, gegen ein hidden-Feld, so müssen wir statt add-UI-Validierung nur für die Felder, die der Benutzer sehen kann)

Nachdem die Felder werden dynamisch Hinzugefügt, um die Seite, die ich führen Sie den folgenden code auf den container:

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

Aber es funktioniert nicht! Seltsam genug, deaktivieren Sie den obigen code, erstellen die dynamischen Elemente, dann läuft der code in der browser-JS-Konsole funktioniert, aber nur die Standard-Validierung Nachricht zeigt.

Bin ich ratlos. Irgendwelche Ideen?

Ich bin mit jQuery Validierung 1.9.0 & unauffällig-plugin

InformationsquelleAutor der Frage Chris Barr | 2012-02-21

  1. 7

    Nun, dass ich verstehe, was Los ist mit der Unobtrusive plugin-Seite der Dinge (was ich verstehe, ist der Zusammenhang ASP.NET irgendwie ist), hier ist, was Sie tun müssen:

    Nachdem Sie das hinzufügen des neuen Elements, rufen Sie $.validator.unobtrusive.parseElement(newElement) - und wird zum Formular Hinzugefügt. Wie Ihre Antwort vorgeschlagen, müssen Sie die data-val-und data-val-required-Attribute in der neuen form-element.

    So dass Sie am Ende mit diesem:

    //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));

    Hier gezeigt: http://jsfiddle.net/ryleyb/LNjtd/2/

    InformationsquelleAutor der Antwort Ryley

  2. 52

    Als es stellt sich heraus, das getan werden kann, meist in HTML, indem Sie ein paar Attribute zu jedem form element:

    • Eine name Attribut
    • data-val="true"
    • data-val-required="message"

    Etwa so:

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

    Dann das Formular muss nur re-analysiert, die über JS:

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

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

    InformationsquelleAutor der Antwort Chris Barr

  3. 1

    Ich glaube, Sie hatte etwas einfach falsch ist - wie Ihr find('.date') war nicht wirklich etwas zu finden. Weil ansonsten ist dein code sieht ganz vernünftig für mich. Hier ist ein Beispiel, es funktioniert wie man es erwartet: http://jsfiddle.net/ryleyb/LNjtd/

    Konnte ich validieren Sie den code korrekt:

    $('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'
      }
    }
);​

    InformationsquelleAutor der Antwort Ryley

Schreibe einen Kommentar