従来のクライアント側の検証 (jQuery Validate など) + サーバー側の検証ではなく、Zend_Form バリデーターを使用してフォームを検証できるようにするスクリプトを作成しました。
$(document).ready(function() {
var form = $('form'); // target form
var requests = [], validations = [];
var nbInputs = $('input[type="text"], input[type="password"]').length; // number of inputs (text/password) in the form
var cancelSubmit = true;
form.submit(function() {
// if we call the submit inside the function, skip validation
if(cancelSubmit === false) {
console.log('[-] cancelSubmit is false. Validation skipped.');
return true;
}
console.log('[-] Entering validation');
// resetting requests and validations results
requests.length = 0;
validations.length = 0;
// for each input (text/password), get the validation status from the server
$('input[type="text"], input[type="password"]').each(function(i) {
var validatorField = $(this).attr('data-validator');
var valueField = $(this).val();
postData = {
validator: validatorField,
value: valueField
};
// storing requests into an array
requests.push($.post('/validate', postData));
});
(function($) {
$.whenAll = function() {
return $.when.apply($, arguments);
};
})(jQuery);
// when all the requests are done and returned a response
$.whenAll(requests).then(function() {
// show the validation status for each input
$.each(requests, function(i, element) {
element.done(function(data) {
json = $.parseJSON(data);
formGroup = $('input:eq('+i+')').parent();
// if it isn't valid, show error
if(json.valid == 0) {
if($('span.help-block', formGroup).length == 0) {
$(formGroup).addClass('has-error').append('<span class="help-block">'+json.message+'</span>');
$('label', formGroup).addClass('control-label');
}
// and store the validation status
validations.push(0);
}
// else, remove error
else if(json.valid == 1) {
$(formGroup).removeClass('has-error');
$('.help-block', formGroup).remove();
// and store the validation status
validations.push(1);
}
// if we got all the validations required
if(validations.length == nbInputs)
{
console.log('[-] All validations have been done.');
if($.inArray(0, validations) == -1){
console.log('[-] No errors. Submitting form.');
cancelSubmit = false;
form.submit();
}
else
console.log('[-] There are still errors.');
}
});
});
});
return false;
});
});
検証ページのサーバー側は、JSON :{ valid: 0, message: "error message" }
または{ valid: 1}
.
フォームを送信できません。有効な値を入力すると、検証はスキップされますが、フォームは送信されません。cancelSubmit
機能させるには、もう一度送信ボタンを押す必要があります (ただし、 に設定されているため、今回はチェックされない無効な値を入力できた可能性がありますfalse
)。
return true;
内で使用される場合、フォームを送信することになっていません.submit()
か?