【发布时间】:2012-06-24 22:59:59
【问题描述】:
更新
感谢 charlietfl 的 cmets 和建议(有时我很生气,大声笑 - 为我的失礼道歉),我终于从 Validate 中得到了系统检查,并且表单提交是发送电子邮件时停止。所以我想我的问题已经得到了解答,但是如果你们都再忍耐我一会儿,我可以使用你们的帮助来做最后的画龙点睛...
在我最初的设想中,除了触发正确的“电子邮件已存在”错误之外,我还使用一些 HTML 填充了第二个元素,该 HTML 更完整地向用户解释了情况并提供了登录表单的链接。这第二个元素根据字段的状态出现和消失。
有没有办法使用消息/远程部分来执行此操作?
这里有什么:
$(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
});
而且,在理想情况下,我会喜欢这样的东西:
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>.');
},
},
},
},
再次感谢您一直以来的关注和建议,
Z
原始问题
我正在使用 jQuery Validate 在注册表单上运行例行验证。但我想添加到表单功能的功能之一是 AJAX 检查以确定电子邮件地址是否已在系统中。问题是电子邮件检查功能存在于验证功能之外,因此实际上并没有在必要时阻止表单提交。
这是我的代码。 (前 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('');
}
});
}
有没有办法让 check_availability() 函数触发停止(以及在清除后启动),以便在错误状态下无法提交表单?或者是否可以使用 addMethod 以某种方式将整个套件和 caboodle 集成到 Validate 中(如果是这样,请注意我在特定 ID 的元素中提供可用性反馈,而不是通过出现其他 Validate 错误的同一元素)?
提前感谢您的所有帮助和建议。
Z
【问题讨论】:
-
不是一个真正的答案,所以我猜是一个评论,但你可以尝试使用我自己的插件,它几乎可以完成 jQuery validate 所做的工作以及更多......github.com/elclanrs/jq-idealforms。您可以使用
exclude过滤器完成您想要的操作,传入要排除的值数组。 -
感谢您的评论。我看了你的插件,看起来很整洁。我没有看到它允许我在哪里查询我的数据库以检查用户名是否可用。我错过了什么吗?
-
哦,好吧,实际上您必须创建自己的查询辅助函数来从数据库中获取数据,但是如果您将这些数据保存在数组中并使用
exclude过滤器将其传递进去它会接近你所追求的。
标签: javascript jquery ajax forms validation