views:

960

answers:

1

Hi all

I am using simple modal to open a registration form. I am trying to validate password and confirm password but the password field is always empty any idea?

<form method="post" action="Player/Register" id="registrationForm">
 <input type="text" id="password" name="password" style="width: 200px" />
 <input type="text" id="password_confirm" name="password_confirm" style="width: 200px" />
<form>

  var validator = $("#registrationForm").validate(
    {
        rules: {
            password: 
            {
              required: true
            },
            password_confirm: {
                equalTo: "#password"
            }
        }
    }
    );
+1  A: 

If in your actual markup the modal is inside the form, it's possible that the model you're using is moving the set of elements in the modal to the end of the <body> (most modal dialogs do this by default), outside of the <form>.

To fix this move the modal container to contain the entire form. The reasoning for this is that when you do equalTo: #ID it's not actually doing $("#ID") to find the element, but rather this:

$("#password", password_confirm_DOM_Eement.form)

If you look inside the validation code, you'll often see $(selector, element.form), meaning that it's only looking inside the same form for that selector. If the elements are moved outside the form by the modal, you can see why this would stop working :)

Nick Craver