2
是否有可能用jQuery驗證器標記一個有效的字段，或者以另一種方式來遠程地關聯其相關的錯誤映射。我使用兩個自定義ajax驗證方法，這意味着我的驗證方法不能返回true或false。因此，我試圖用showErrors隱藏錯誤：{field：false}（並標記validator.invalid.field = false），但我猜一些錯誤映射仍然保留，這阻止了表單在onsubmit：true時提交。如果我設置了onsubmit：true，即使有一個ajax驗證字段出現錯誤，表單也會提交！jQuery驗證器標記字段有效
$(document).ready(function() {
var validator = $(".formframe").validate({
groups: { phone: "phone_1 phone_2 phone_3" },
rules: {
FirstName: { required: true },
LastName: { required: true },
Email: { required: true, email_custom: true },
phone_1: { required: true }, // these two fields get a phone validation rule
phone_2: { required: true }, // added upon validation triggered by phone_3
phone_3: { required: true, phone: true },
Address1: { required: true },
City: { required: true },
PostalZipCode: { required: true, postalcode: true },
CustField1: { required: true, range: [1950,2012] }
},
messages: {
FirstName: "S'il vous plaît entrer votre prénom",
LastName: "S'il vous plaît entrer votre nom de famille",
Email: "S'il vous plaît entrer une adresse email valide",
phone_1: "S'il vous plaît entrer votre numéro de téléphone",
phone_2: "S'il vous plaît entrer votre numéro de téléphone",
phone_3: {
required: "S'il vous plaît entrer votre numéro de téléphone",
phone: "Numéro de téléphone doit être réel"
},
Address1: "S'il vous plaît, entrer votre adresse",
City: "S'il vous plaît, entrer votre ville",
PostalZipCode: {
required: "S'il vous plaît entrer votre code postal",
postalcode: "S'il vous plaît entrer votre code postal"
},
CustField1: {
required: "S'il vous plaît entrer votre dernière année d'études",
range: "Entrer une année de l'obtention du diplôme réel"
}
},
onfocusout: function(element) { $(element).valid(); },
errorPlacement: function(error, element) {
if (element.attr("name") == "phone_1" || element.attr("name") == "phone_2" || element.attr("name") == "phone_3") {
error.insertAfter("#phone_3");
} else {
error.insertAfter(element);
}
},
onkeyup: false,
onsubmit: true
}); console.log(validator);
// custom email validation method
$.validator.addMethod("email_custom", function(value, element) {
var verify = $.tdverify({
// Use TowerData's domain authentication for best security
// or set your license key here
'license' : 'xxx',
// This is the data to validate
// The values here are the IDs of the input fields.
// See demo.js on how to use jQuery or DOM to specify fields.
'email' : $('#Email'),
});
// These are the API settings.
verify.set({
'settings' : {
'valid_email' : 'mailbox', // Enable email validation of mailbox.
// Use value of 'syntaxdomain' for syntax and
// domain validation only.
'timeout' : 5 // Set timeout to 5 seconds
}
});
// because this function uses a callback, we can't return true to the validation
// method, instead we set validator.invalid.[field name] = false so the form submits
verify.process({
'onSuccess' : function(data, textStatus, xhr) {
if (typeof data.email == "object" && data.email.ok == false) {
//validator.showErrors({"Email": data.email.status_desc});
validator.defaultShowErrors();
} else {
validator.showErrors({"Email": false});
delete validator.invalid["Email"];
console.log(validator);
}
},
'onError' : function() {
validator.showErrors({"Email": "Email validation timeout"});
}
});
});
// custom phone validation method
$.validator.addMethod("phone", function(value, element) {
// concatenate phone number parts into a single hidden field
$("#phone").val($("#phone_1").val() + $("#phone_2").val() + $("#phone_3").val());
// initially only phone_3 has validation enabled, this allows the phone number to be
// typedfrom start to finish, adding the phone class to phone_1 and phone_2
// will cause them to be validated if they are changed
$("#phone_1,#phone_2").addClass("phone");
var verify = $.tdverify({
// Use TowerData's domain authentication for best security
// or set your license key here
'license' : 'xxx',
// This is the data to validate
// The values here are the IDs of the input fields.
// See demo.js on how to use jQuery or DOM to specify fields.
'phone' : $("#phone")
});
// These are the API settings.
verify.set({
'settings' : {
'valid_phone' : true, // Enable phone validation
'timeout' : 5 // Set timeout to 5 seconds
}
});
verify.process({
'onSuccess' : function(data, textStatus, xhr) {
if (typeof data.phone != "undefined" && data.phone.ok == false) {
//validator.showErrors({"phone": data.phone.status_desc});
validator.defaultShowErrors();
} else {
validator.showErrors({"phone_3": false});
delete validator.errorMap["phone_1"];
delete validator.errorMap["phone_2"];
delete validator.errorMap["phone_3"];
delete validator.invalid["phone_1"];
delete validator.invalid["phone_2"];
delete validator.invalid["phone_3"];
console.log(validator);
}
},
'onError' : function() {
validator.showErrors({"phone_3": "Phone validation timeout"});
}
})
});
$.validator.addMethod("postalcode", function(postalcode, element) {
if(postalcode.length == 6 && !parseInt(postalcode)){
// no space in postal code
var s = postalcode.substring(0,3) + ' ' + postalcode.substring(3);
element.value = s;
}
return this.optional(element) || postalcode.match(/(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
});
// phone number auto-tabbing
$('#phone_1').autotab({ target: 'phone_2', format: 'numeric' });
$('#phone_2').autotab({ target: 'phone_3', format: 'numeric', previous: 'phone_1' });
$('#phone_3').autotab({ previous: 'phone_2', format: 'numeric' });
$("#PostalZipCode").autotab_filter('alphanumeric');
// allows only numeric input:
// this keydown binding won't allow letters at all, the above autotab
// numeric format simply removes anything typed that isn't within 0-9
$("#phone_1,#phone_2,#phone_3,#CustField1").keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
// automatically capitalize letters in postal code
$("#PostalZipCode").keyup(function() {
$(this).val(($(this).val()).toUpperCase());
});
});
我想用submitHandler只有提交表單，如果validator.invalid是空的。 submitHandler從不觸發，因爲表單不驗證，即使沒有錯誤出現... – Ted