Validate multiple forms on one page

Question

New to jquery and trying to implement the validation plugin on a page with three forms. Submitting the first form works fine. In trying to submit the second form on the page(#loginForm) which requires only the username and password, the validation error appears in the form below looking for an email address. The forms --

<div class="newsTitle">REGISTER HERE</div>
<form id="registerForm" action="register.php" method="post" name="registerForm">
<b>Enter your email address</b><br>
<input type="text" id="emailrf" name="emailrf" size="30"  maxlength="64"><p>
<b>Full Name</b><br>
<input type="text" id="full_namerf" name="full_namerf" size="30" maxlength="64"><p>
Choose Username <span class="cap">( 4-24 characters )</span><br>
<input type="text" id="usernamerf" name="usernamerf" size="24" maxlength="24"><p>
Choose Password <span class="cap">( 6-12 characters )</span><br>
<input type="text" id="passwordrf" name="passwordrf" size="12" maxlength="12"><p>
<input type="hidden" name="formStatusregister" value="register">            
<input type="submit" id="rForm" class="subMit" name="srForm" value="REGISTER">
</form><p><br>

<div class="newsTitle">LOG IN PLEASE</div>
<form id="loginForm" action="register.php" method="post" name="loginForm">
<b class="red">username</b><br>
<input type="text" id="usernameli" name="usernameli" size="30"><p>
<b class="red">password</b><br>
<input type="password" id="passwordli" name="passwordli" size="30"><p>
<input type="checkbox" name="remember" value="yes">  Remember Me 
 <input type="hidden" name="formStatuslogin" value="submitted"><br>             
<input type="submit" id="liForm" class="subMit" name="liForm" value="LOG-IN">
</form>

<p><br>
<div class="newsTitle">RETRIEVE YOUR LOG-IN INFO</div>
<form id="lostForm" action="register.php" name="lostForm" method="post">
Enter your email address and click SUBMIT.<p>
<input type="hidden" name="forgot" value="yes">
<b>email address</b><br>
<input type="text" id="emaill" name="emaill" size="30"><p>
<input type="hidden" name="referrer" value="">
<input type="hidden" name="formStatuslost" value="forgot">
<input type="submit" id="lForm" name="lForm" value="SUBMIT">
</form>

and the js code:

$(document).ready(
function() {    
    $('#lostForm').validate({
        rules: {
            emaill: { 
            required:true,
            email:true
            }       
        }
});

$('#loginForm').validate({
rules: {        
    usernameli:{
        required:true,
        rangelength:[6,24]
        },          
        passwordli:{
        required:true
        }

}//--end rules

}); //--- END loginForm validate() ---//

$('#registerForm').validate({
rules: {
    emailrf: { 
    required:true,
    email:true,
            remote:{
                url:'check_email.php',
                type:'post'
                }
        },
        full_namerf: {
        required:true,
        letters:true
        },
        usernamerf:{
        required:true,
        rangelength:[6,24],
        remote:{
                url:'check_user.php',
                type:'post'
                }           
        },

        passwordrf:{
        required:true,
        rangelength:[6,12]
        }

}, //--end rules
messages:{
emailrf: {
remote:"This email is already registered"
},
usernamerf: {
remote:"Already in use - choose another"
}


} //end messages
}); //--- END registerForm validate() ---//

}); //--END ready---//

It acts as if the 2nd and 3rd forms are nested but they're not. What might be the issue?

Answer 1

You are using the same ID attribute on multiple inputs.

Each ID should be unique on the page. try prefixing the id with the name of the form to make it more unique eg:

<input type="text" id="registerformusername" name="username" size="24" value=""maxlength="24"><p>

That should help Jquery decide which elements are which

Edit: I've taken your altered code and put it into a simple html page. This seems to work fine . any validation errors only occur on the form that they belong to and only appear when the submit button for that form is clicked. Code follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
</head>
<body>

<p><br>
<div class="newsTitle">REGISTER HERE</div>
<form id="registerForm" action="register.php" method="post" name="registerForm">
<b>Enter your email address</b><br>
<input type="text" id="emailrf" name="emailrf" size="30"  maxlength="64"><p>
<b>Full Name</b><br>
<input type="text" id="full_namerf" name="full_namerf" size="30" maxlength="64"><p>
Choose Username <span class="cap">( 4-24 characters )</span><br>
<input type="text" id="usernamerf" name="usernamerf" size="24" maxlength="24"><p>
Choose Password <span class="cap">( 6-12 characters )</span><br>

<input type="text" id="passwordrf" name="passwordrf" size="12" maxlength="12"><p>
<input type="hidden" name="formStatusregister" value="register">            
<input type="submit" id="rForm" class="subMit" name="srForm" value="REGISTER">
</form><p><br>

<div class="newsTitle">LOG IN PLEASE</div>
<form id="loginForm" action="register.php" method="post" name="loginForm">
<b class="red">username</b><br>
<input type="text" id="usernameli" name="usernameli" size="30"><p>
<b class="red">password</b><br>
<input type="password" id="passwordli" name="passwordli" size="30"><p>
<input type="checkbox" name="remember" value="yes">  Remember Me 
<input type="hidden" name="formStatuslogin" value="submitted"><br>             

<input type="submit" id="liForm" class="subMit" name="liForm" value="LOG-IN">
</form>

<p><br>
<div class="newsTitle">RETRIEVE YOUR LOG-IN INFO</div>
<form id="lostForm" action="register.php" name="lostForm" method="post">
Enter your email address and click SUBMIT.<p>
<input type="hidden" name="forgot" value="yes">
<b>email address</b><br>
<input type="text" id="emaill" name="emaill" size="30"><p>
<input type="hidden" name="referrer" value="">
<input type="hidden" name="formStatuslost" value="forgot">
<input type="submit" id="lForm" name="lForm" value="SUBMIT">
</form>

<script>


$(document).ready(
function() {    
$('#lostForm').validate({
rules: {
    emaill: { 
    required:true,
    email:true
    }       
}
});

$('#loginForm').validate({
rules: {        
usernameli:{
required:true,
rangelength:[6,24]
},          
passwordli:{
required:true
}

}//--end rules

}); //--- END loginForm validate() ---//

$('#registerForm').validate({
rules: {
emailrf: { 
required:true,
email:true,
    remote:{
        url:'check_email.php',
        type:'post'
        }
},
full_namerf: {
required:true,
letters:true
},
usernamerf:{
required:true,
rangelength:[6,24],
remote:{
        url:'check_user.php',
        type:'post'
        }           
},

    passwordrf:{
    required:true,
    rangelength:[6,12]
    }

}, //--end rules
messages:{
emailrf: {
remote:"This email is already registered"
},
usernamerf: {
remote:"Already in use - choose another"
}


} //end messages
}); //--- END registerForm validate() ---//

}); //--END ready---//
</script>
</body></html>