javascript jQuery Validate + AJAX 用户名可用性检查：如何与他们结婚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11181869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Validate + AJAX username availability check: How to marry them?
提问by Shikarnov
UPDATE
更新
Thanks to charlietfl'scomments and suggestions (and, at one point ire, lol - apologies for my faux pas), I've finally got the system checking from within Validate, and the form submission is halted when the email is sent. So I guess my question is answered, but if you'll all bear with me for one more moment, there's one last finishing touch that I could use your help with...
多亏了charlietfl 的意见和建议（而且，在某一点上，我很生气，大声笑 - 为我的失礼道歉），我终于从 Validate 中检查了系统，并且在发送电子邮件时停止了表单提交。所以我想我的问题已经得到解答，但如果你们能再忍受我一会儿，我可以利用你们的帮助进行最后的最后润色……
In my original vision, in addition to triggering a proper "Email already exists" error, I also populated a second element with some HTML that more completely explained the situation to the user and provided a link to a login form. This second element appeared and disappeared depending on the status of the field.
在我最初的设想中，除了触发正确的“电子邮件已经存在”错误之外，我还用一些 HTML 填充了第二个元素，更完整地向用户解释了情况，并提供了一个登录表单的链接。这第二个元素的出现和消失取决于场的状态。
Is there a way to use the messages/remote section to do this as well?
有没有办法使用消息/远程部分来做到这一点？
Here what I have:
这是我所拥有的：
$(document).ready(function(){
$("#signup").validate({
errorElement: "span",
errorPlacement: function(error, element) {
error.appendTo(element.prev());
//element.prev().replaceWith(error);
},
rules: {
"email": {
required: true,
email:true,
remote: {
url: "/ajax/emailcheck.php",
type: "post",
},
},
"password": {
required: true,
minlength: 8,
},
"password-check": {
required: true,
minlength: 8,
passmatch: true,
},
"tos": {
required: true,
minlength: 6,
}
},
messages: {
email: {
required: " is Required",
email: " is Improperly Formatted",
remote: " already exists",
},
},
password: {
required: " is Required",
minlength: " requires at least 8 characters",
},
"password-check": {
required: " is Required",
minlength: " requires at least 8 characters",
passmatch: " must match the Passphrase",
},
tos: {
required: " is Required",
minlength: " requires at least 6 characters",
},
},
onkeyup: true,
onblur: true
});
And, in the ideal, I'd love something like this:
而且，在理想情况下，我会喜欢这样的事情：
messages: {
email: {
required: " is Required",
email: " is Improperly Formatted",
remote: " already exists",
remote: {
username: function() {
var emailcheck = $('#email').val();
return $('#username_availability_result').html(emailcheck + ' is already in our system. Please <a href="/login.php">log in here</a>.');
},
},
},
},
Thanks again, and in advance, for your own ongoing attention and advice,
再次提前感谢您的持续关注和建议，
Z
Z
ORIGINAL QUESTION
原问题
I'm using jQuery Validate to run routine validation on a registration form. But one of the features I wanted to add to the form's functionality was an AJAX check to determine if an email address was already in the system. The problem is that the email check function exists outsideof the validate function, and so doesn't actually stop the form from submitting when necessary.
我正在使用 jQuery Validate 在注册表单上运行例行验证。但我想添加到表单功能的特性之一是 AJAX 检查，以确定系统中是否已经存在电子邮件地址。问题是，邮件检查功能存在以外的验证功能的，所以实际上并没有从提交必要时停止形式。
Here's my code. (The top 50 lines comprise validation and password matching. The remainder constitutes the AJAX check [which is triggered by the email field's keyup event]).
这是我的代码。（前 50 行包括验证和密码匹配。其余行构成 AJAX 检查 [由电子邮件字段的 keyup 事件触发]）。
// Method adds password matching abilities to the validator
jQuery.validator.addMethod("passmatch", function(value, element) {
return $('#password').val() == $('#password-check').val()
}, "* Passwords should match");
$(document).ready(function(){
$("#signup").validate({
errorElement: "span",
errorPlacement: function(error, element) {
error.appendTo(element.prev());
//element.prev().replaceWith(error);
},
rules: {
"email": {
required: true,
email:true,
},
"password": {
required: true,
minlength: 8,
},
"password-check": {
required: true,
minlength: 8,
passmatch: true,
},
"tos": {
required: true,
minlength: 6,
}
},
messages: {
email: {
required: " is Required",
email: " is Improperly Formatted",
},
password: {
required: " is Required",
minlength: " requires at least 8 characters",
},
"password-check": {
required: " is Required",
minlength: " requires at least 8 characters",
passmatch: " must match the Password"
},
tos: {
required: " is Required",
minlength: " requires at least 6 characters",
},
}
});
//check email availability
$('#email').keyup(function(){
check_availability();
});
});
//function to check username availability
function check_availability(){
//get the username
var username = $('#email').val();
//use ajax to run the check
$.post("/ajax/emailcheck.php", { username: username },
function(result){
//if the result greater than none
if(result > 0 ){
//show that the username is not available
$('#username_availability_result').html(username + ' is already in our system. Please <a href="/login.php">log in here</a>.');
}else{
//username available.
//clear any messages
$('#username_availability_result').html('');
}
});
}
Is there a way for the check_availability() function to trigger a stop (and a start once it's cleared) so that the form can't be submitted during a state of error? Or can the whole kit and caboodle somehow be integrated into Validate using addMethod (if so, please note that I'm providing availability feedback in a specifically IDed element, not through the same element where other Validate errors appear)?
有没有办法让 check_availability() 函数触发停止（并在清除后开始），以便在错误状态期间无法提交表单？或者是否可以使用 addMethod 以某种方式将整个工具包和 caboodle 集成到 Validate 中（如果是这样，请注意我在特定 ID 元素中提供可用性反馈，而不是通过出现其他 Validate 错误的同一个元素）？
Thanks in advance for all your help and advice.
在此先感谢您的帮助和建议。
Z
Z
回答by charlietfl
Use the remote option of validation plugin that already has a built in ajax method that will bind to the input
使用验证插件的远程选项，该插件已经具有将绑定到输入的内置 ajax 方法
http://docs.jquery.com/Plugins/Validation/Methods/remote#options
http://docs.jquery.com/Plugins/Validation/Methods/remote#options
Alternatively requiredcan also be a function ( will not work on keyup or blur)
或者required也可以是一个函数（不适用于 keyup 或模糊）
email:{ required: function(){
return $('#username_availability_result').html()=='';
}
}
Also, why not reset the email field if ajax returns a duplication? Your code would likely work as is with a reset of the field
另外，如果 ajax 返回重复，为什么不重置电子邮件字段？您的代码可能会在重置该字段后按原样工作
Best suggestion is use built in remote
最好的建议是使用内置 remote
回答by zohaib
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#singupfrom").validate({
rules: {
'useremail': {// compound rule
required: true,
email: true,
remote:{
url: "check_email.php",
type: "post",
data:
{
emails: function()
{
return $('#singupfrom :input[name="useremail"]').val();
}
}
}
}
},
// here custom message for email already exists
messages: {
useremail: { remote: "Email already exists"}
}
});
});
</script>
<!-- your user email-->
<label>Email :</label>
<input type="text" name="useremail" id="useremail" value="" />
<!-- your user email end -->
// your php file "check_email.php" will be some thing like it
/// get or post can also be used in place of request depending on situation
$email = $_REQUEST['useremail'];
<?php
$check = "your query to check the email and returns the no of rows/ emails exists ";
if ($check == '0' or empty($check)) {
echo 'true';
} else {
echo 'false';
}
?>
