3
我已編碼自定義表單驗證。驗證工作正常所有的瀏覽器,但當我按下輸入密鑰IE不提交如果用戶輸入正確的數據......點擊按鈕它的提交表單。我試圖調試它,它返回true驗證後,但不submiting形式...IE沒有提交我的表單輸入按回車鍵?
(function($){
$.fn.securityFramework = function() {
var form = $(this);
var $submitBtn = $('input.sf-submit');
var errorClass = "error";
var passClass = "pass";
var MandatoryClass = "mandatory";
//var $securityQuestions = $('.securityQuestions');
// used in form submission
var submitOK = false;
var currentPWResult = true;
var tcResult = true;
//check username length
var $userName = $('#userName',form);
// create empty warning spans to stop focus issues in IE
//displayResult($('input[type=text]', form), "","");
//displayResult($('input[type=password]', form), "","");
/* Registration form checks */
// check user name for length and invaid characters
$userName.keyup(function() {
var userResult = minLength(6, $userName.val().length);
var userNameResult = validUserName($userName.val());
if ($(this).val() != "") {
if (userResult || userNameResult) {
if(userResult) {
//displayResult($(this), 'Please choose a longer username', errorClass);
$(this).focus();
}
if(userNameResult) {
//displayResult($(this), 'Your username contains invalid characters', errorClass);
$(this).focus();
}
} else {
//displayResult($(this), '', passClass);
$(this).focus();
}
}
});
// check that all form text inputs are not empty
$('input[type=text]:not(input.email)', this).blur(function() {
$(this).each(function(index, value) {
if(isEmptyString($(this))) {
var message = checkManitoryMessage($(this));
//displayResult($(this), message, MandatoryClass);
} else {
// remove mandatory class
if ($(this).siblings().hasClass('mandatory')) {
$(this).siblings().remove();
}
}
});
});
$('input[type=password]:not(input.password)', this).blur(function() {
$(this).each(function(index, value) {
if(isEmptyString($(this))) {
var message = checkManitoryMessage($(this));
//displayResult($(this), message, MandatoryClass);
} else {
// remove mandatory class
if ($(this).siblings().hasClass('mandatory')) {
$(this).siblings().remove();
}
}
});
});
// check validation on form submission
form.submit(function(e) {
// trigger checks for empty fields
$('input[type=password]', form).trigger('blur');
$('input[type=text]', form).trigger('blur');
submitCheck();
if(submitOK) {
alert("true");
return true;
} else {
return false;
}
});
// generic testing functions
function emailVal(emailAddress) {
emailAddress = emailAddress.toLowerCase();
var pattern = new RegExp(/^[a-z0-9_\+-]+(\.[a-z0-9_\+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,4})$/);
return pattern.test(emailAddress);
}
// check for empty string
function isEmptyString(jQueryObj) {
return (jQueryObj.val() == "");
}
// check username for invalid characters ("!£$%?/@)
function validUserName(name) {
var pattern = new RegExp(/["\u00A3!\$%\?/@]/);
return pattern.test(name);
}
// check string length against a value
function minLength(minLength, string) {
return((string+1) <= minLength);
}
// check that two strings match
function checkStringsMatch(string1, string2){
// console.log('str1: ' + string1 + ' str2: ' + string2);
return(string1 == string2);
}
// check for password validation
function checkPasswordValidation(passwordObj){
password=passwordObj.val();
var pattern = new RegExp(/^.*(?=.{8,})(?=.*[a-zA-Z])(?=.*\d).*$/);
return pattern.test(password);
}
// check password strength
function checkPwStrength() {
var pwStrength = $('#strengthWidget').attr('class');
// check class for password classification
if(pwStrength == 'pw-weak') {
return true;
}
return false;
}
// generic display error and confirm message function
function displayResult(selector, message, className) {
// check to see if input has a wrapper span to hold message
if(selector.parent().hasClass('wrapper')) {
// has wrapper, remove message contained
selector.parent().children('span').remove();
} else {
// no wrapper, add one to append message to
selector.wrap('<span class="wrapper"></span>');
}
selector.parent().append('<span class="' + className + '">' + message + '</span>');
}
// checks to see if any errors on page, if none found enable submission
function submitCheck() {
var $errorsExist = $('.error', form);
var $mandErrorsExist = $('.mandatory', form);
var $highlightErrorsExist = $('.highlightError', form);
// console.log($highlightErrorsExist.length);
// console.log('$errorsExist.length: ' + $errorsExist.length);
// console.log('$mandErrorsExist.length: ' + $mandErrorsExist.length);
if ($errorsExist.length || $mandErrorsExist.length || $highlightErrorsExist.length) {
submitOK = false;
} else {
submitOK = true;
}
// console.log('submitOK = ' + submitOK);
}
function checkManitoryMessage($object) {
var inputId = '';
inputId = $object.attr('id');
inputId = inputId.toLowerCase();
if (inputId == undefined) {
inputId = 'Manditory Field';
} else {
inputId = sfErrors[inputId];
}
return inputId;
}
return form;
}; // end of plugin
})(jQuery);
是在頁面上唯一的提交按鈕?如果不是,它是否以源代碼的順序出現?默認情況下,按Enter鍵將提交頁面上的第一個提交按鈕。如果這是唯一的一個,那麼你可能需要創建另一個函數來監聽輸入鍵,然後表單將被提交,只有問題是用戶在完成特定字段等時可能會輸入,表單試圖提交當這不是他們想要做的,但我想你的驗證不會提交表格,所以不應該有任何不利影響做到這一點。 – martincarlin87 2011-12-14 11:58:15