validieren von Benutzereingaben innerhalb modal popup using jquery validation plugin

Ich versuche zur überprüfung von Benutzereingaben in einem jquery UI modal-dialog.
Jquery validation plugin für die Validierung verwendet.

versuchen, um zu überprüfen, Validierung im popup-Schaltfläche, klicken Sie auf

<form id="frm">
    <div>
        <button name="btn" id="btn" type="button" >OpneModal</button>
    <div id="dlg" style="display:none">
        <div>
            Name: <input type="text" id="txtName" name="txtName"/>
        </div>
        <div>
        </div>
        </div>
        </div>
    </form>


 $(
     function () {
           var rules = {
            txtName: {
                required: true
            }
        };
        var messages = {
            txtName: {
                required: "Please enter name"
            }
        };
       $("#frm").validate({rules:rules, messages:messages});


          $("#btn").click(
              function () {

                  $("#dlg").dialog(
                      {
                          modal: true,
                          buttons: {
                              "Save": function () {
                                alert(  $("#frm").valid());
                              },
                              "Cancel": function () {
                                  $("#dlg").dialog("close");
              }
                          }

                      }
                      );
              }
              );

      });

Aber die Validierung ist immer Erfolg.

code in js fiddle: http://jsfiddle.net/aGJrZ/6/

Den HTML-Code in Ihre jsFiddle ist ungültig. Es fehlen mindestens zwei schließen div tags: </div>.
und aktualisiert die Geige und der gesamte code Hinzugefügt, um die Frage

InformationsquelleAutor Brainchild | 2013-08-24

  1. 1

    Dem jQuery-Validation-plugin erfordert, dass alle input-Elemente muss werden, die in einem Satz von <form></form> - tags. Aber mit dem DOM-inspector, Sie können das sehen, wenn das Dialogfeld erstellt wird, ist es außerhalb der <form></form> ganz.

    Re-Faktor, der HTML, so dass die form enthalten ist innen Ihr dialog...

    <button name="btn" id="btn" type="button">Open Modal</button>
<div id="dlg" style="display:none">
    <form id="frm">
        <div>
            Name:  <input type="text" id="txtName" name="txtName" />
        </div>
    </form>
</div>

    DEMO: http://jsfiddle.net/aGJrZ/9/

    InformationsquelleAutor Sparky

Schreibe einen Kommentar