Проверить несколько форм на одной странице - PullRequest
1 голос
/ 20 февраля 2012

Новичок в jquery и попытка реализовать плагин проверки на странице с тремя формами.Отправка первой формы работает нормально.При попытке отправить вторую форму на странице (#loginForm), которая требует только имя пользователя и пароль, в форме ниже появляется ошибка проверки в поисках адреса электронной почты.Формы -

<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>

и код js:

$(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---//

Он действует так, как будто 2-я и 3-я формы вложены, но это не так.В чем может быть проблема?

1 Ответ

2 голосов
/ 20 февраля 2012

Вы используете один и тот же атрибут ID для нескольких входов.

Каждый идентификатор должен быть уникальным на странице.попробуйте добавить префикс id к имени формы, чтобы сделать ее более уникальной, например:

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

Это должно помочь Jquery определить, какие элементы являются

Редактировать: я взял ваш измененный коди поместите его в простую HTML-страницу.Кажется, это работает нормально.любые ошибки проверки возникают только в той форме, к которой они принадлежат, и появляются только при нажатии кнопки отправки для этой формы.Код следует:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...