当前位置： 文江博客话题详情

验证一页上的多个表单

发布于 2025-01-07 21:08:51 字数 3679 浏览 1 评论 0原文

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

它的作用就好像第二个和第三个表单是嵌套的，但实际上并非如此。可能是什么问题？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

动听の歌 2025-01-14 21:08:51

您在多个输入上使用相同的 ID 属性。

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

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>
回复 原文
~没有更多了~

关于作者

踏雪无痕

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文