我還有另一個問題與.rules(
)函數添加到堆中。我理解它應該在使用.validate()
之後纔會出現,但我仍然在控制檯中收到「無法找到設置」類型錯誤。jQuery .rules()函數
我不在.validate()
裏面添加它的原因是因爲我在頁面上有多個表單,其中一些表單使用了具有相同名稱的輸入(它們使用AJAX提交,名稱字段指向我的DDB專欄)。
下面的代碼。有任何想法嗎?
<form id="userForm" class='validate form-horizontal'>
<fieldset>
<legend class="text-center">Not a member yet?</legend>
<input type="hidden" name="User_ID" id="User_ID">
<input type="hidden" name="PermissionLevel" id="PermissionLevel" value="1">
<div class="form-group">
<label for="RegisterUserName">Email Address:</label>
<input type="text" name="UserName" id="RegisterUserName" class="required email form-control tooltip-toggle" title="This will be your username" data-placement="right">
</div>
<div class="form-group">
<label for="RegisterUserPassword">Password:</label>
<input type="password" name="UserPassword" id="RegisterUserPassword" class="required password form-control tooltip-toggle" title="Your password must be between 8-14 characters and can only contain numbers, letters, and the following symbols: @ * _ - . !" data-placement="right" rangelength="[8,14]">
</div>
<div class="form-group">
<label for="RegisterUserPassword2">Confirm Password:</label>
<input type="password" name="UserPassword2" id="RegisterUserPassword2" class="required password form-control" rangelength="[8,14]">
</div>
<div class="form-group">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-primary btn-register form-submit" data-form="registerUsername">Register</button>
</div>
</div>
</fieldset>
</form>
$('form.validate').each(function() {
$(this).validate({
errorElement: 'span',
errorClass: 'has-error help-block',
errorPlacement: function(error, element) {
if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
error.appendTo(element.next('.chosen-container'));
} else {
element.after(error);
}
},
highlight: function (element, errorClass, validClass) {
if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
$(element).next('.chosen-container').find('a').addClass(errorClass).removeClass(validClass);
}
$(element).closest('.form-group').addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) {
$(element).next('.chosen-container').find('a').removeClass(errorClass).addClass(validClass);
}
$(element).closest('.form-group').addClass(validClass).removeClass(errorClass);
},
ignore: ':hidden:not(.chosen-select):not(.chosen-select-multiple)'
});
$.validator.addMethod('USAdate', function(value, element, param) {
var isValidDate = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/.test(value);
return this.optional(element) || isValidDate;
}, 'Please enter a valid date.');
$.validator.addMethod('phone', function(value, element, param) {
var isValidPhone = /^[2-9]\d{2}-\d{3}-\d{4}$/.test(value);
return this.optional(element) || isValidPhone;
}, 'Please enter a valid phone number.');
$.validator.addMethod('password', function(value, element, param) {
var isValidPassword = /^[A-Za-z0-9\d=!\[email protected]_*]+$/.test(value);
return this.optional(element) || isValidPassword;
}, 'Must be between 8-14 characters, only numbers, letters, and the following symbols: @ * _ - . !');
$.validator.addMethod('nnInteger', function(value, element, param) {
var isNNInteger = /^\d+$/.test(value);
return this.optional(element) || isNNInteger;
}, 'Please enter a non-negative number.');
$('#RegisterUserPassword2').rules('add', {
equalTo: '#RegisterUserPassword',
messages: {
equalTo: 'Passwords must match.'
}
});
});
$('.form-submit').on('click', function() {
var form = $(this).closest('form');
switch ($(this).data('form')) {
case 'registerUsername':
var loginModal = $('#login');
var registerModal = $('#register');
if (form.validate().form()) {
$.ajax({
type: 'POST',
url: 'includes/ajax/ajax-registerUsername.php',
data: form.serialize(),
dataType: 'json',
success: function(data) {
if (data.result === 'error') {
loginModal.find('.modal-header').addClass('error');
loginModal.find('.modal-footer').addClass('error').html('Error: An error occured while submitting your username<br>' + data.message);
return false;
} else {
console.log(data);
clientRegistration = data.user;
loginModal.modal('hide');
var registerCarousel = registerModal.find('#registerCarousel');
registerModal.modal({backdrop: 'static', keyboard: false}, 'show');
}
}
});
}
break;
}
});
編輯:只需註釋掉.rules()
呼叫刪除Uncaught TypeError: Cannot read property 'settings' of undefined
錯誤。
編輯2:按照建議包裝表單驗證,添加一個表單提交示例。
正如您發佈它的最新版本的代碼沒有問題:http://jsfiddle.net/r0fd80hb/ – Sparky