我有这个移动表单,我正在使用jQuery验证,到目前为止,我已设法使用.error元素作为占位符,问题是它不断在放置位置内给出错误消息,因此不想添加.valid类,如果我输入它实际上可以使用电子邮件和密码字段!
JS
$(document).ready(function() {
$("#ValidateOrderRegistration").validate({
rules: {
FirstName: {
required: true,
minlength: 1
},
LastName: {
required: true,
minlength: 1
},
Username: {
required: true,
minlength: 2
},
Password: {
required: true,
minlength: 6
},
PasswordConfirm: {
required: true,
minlength: 6,
equalTo: "#f-password"
},
EmailAddress: {
required: true,
email: true
},
},
messages: {
FirstName: {
required: "Please enter your First Name",
minlength: "Please enter at least 2 characters",
},
LastName: {
required: "Please enter your surname",
minlength: "Please enter at least 2 characters",
},
Password: {
required: "Enter a 6 or more digits password",
minlength: "At least 6 characters"
},
PasswordConfirm: {
required: "Confirm Password Password",
minlength: "Your password must be at least 6 characters"
},
EmailAddress: {
required: "Enter an Email",
email: "Not Valid"
},
},
errorPlacement: function(error, element) {
element.val(error[0].outerText);
}, //Puts errors as placeholders
}) //add rules
$(this).find("input[type=text]").each(function() {
if ($(this).attr("placeholder") == $(this).val())
$(this).val("");
}) //validate everything
$('.cat_textbox').on('click focusin', function() {
this.value = '';
}); //cleans fields
$('#EmailAddress').on('click', function() {
$('#EmailAddress .error').removeClass('error');
$(this).addClass('success');
}); //I tried this!
$("#EmailAddress").click(function(e) {
var email = $("#EmailAddress");
var emailaddressVal = $("#EmailAddress").val();
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (!emailReg.test(email.val())) {
email.addClass("error").focus();
} else {
email.removeClass("error");
} //
return false;
});
}); //MAIN VALIDATION
答案 0 :(得分:2)
您当前正在将错误消息设置为元素的实际值。将其设置为placeholder
将在您单击该元素后将其删除,并且该插件会在验证成功时自动删除错误类。
将errorPlacement
更改为:
errorPlacement: function (error, element) {
element.attr("placeholder", error[0].outerText);
}