55
I have a single form that, depending on which radio button is clicked (Login or Signup), displays either:
- email address
- password
or:
- name
- age
- email address
- password
Clicking on the radio button toggles the visibility of the Login/Signup fields:
<form id="myForm">
<input name="userAction" type="radio" value="login" checked="checked">Login</input>
<br />
<input name="userAction" type="radio" value="signup">Sign Up</input>
<div id="loginFields" style="display:none">
<!-- Login fields (email address and password) -->
</div>
<div id="signupFields" style="display:none">
<!-- Signup fields (name, age, email address, password) -->
</div>
</form>
I'm using the jQuery Validation plug-in, and I'd like to use the following rules:
var signupRules = {
emailAddressTextBox:
{
required: true,
email: true
},
passwordTextBox:
{
required: true,
minlength: 6,
maxlength: 24,
passwordValidationRule: true // custom regex added with $.validator.addMethod()
}
};
var loginRules = {
nameTextBox:
{
required: true,
maxlength: 50
},
loginEmailAddressTextBox:
{
required: true,
email: true
},
loginPasswordTextBox:
{
required: true,
minlength: 6,
maxlength: 24,
passwordValidationRule: true // custom regex added with $.validator.addMethod()
},
loginPasswordAgainTextBox:
{
required: true,
minlength: 6,
maxlength: 24,
equalTo: "#loginPasswordTextBox"
passwordValidationRule: true // custom regex added with $.validator.addMethod()
}
};