validating user input inside modal popup using jquery validation plugin

Question

I am trying to validate user input in a jquery UI modal dialog. Jquery validation plugin is used for validation.

trying to verify validation in popup button click

<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");
              }
                          }

                      }
                      );
              }
              );

      });

But the validation is always success.

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

The HTML in your jsFiddle is invalid. It's missing at least two closing div tags: </div>. — Sparky
– Sparky, Commented Aug 24, 2013 at 16:40
@Sparky,Corrected and updated the fiddle and entire code added to the question — Brainchild
– Brainchild, Commented Aug 24, 2013 at 16:46

Sparky · Accepted Answer · 2013-08-24 16:55:33Z

1

The jQuery Validation plugin requires that all input elements must be contained within a set of <form></form> tags. However, using the DOM inspector, you can see that when your dialog box is constructed, it is outside of the <form></form> entirely.

Re-factor the HTML so that the form is contained inside your 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/

answered Aug 24, 2013 at 16:55

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

validating user input inside modal popup using jquery validation plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related