Я пытаюсь добавить скрипт проверки Jquery в плагин формы для WordPress. Плагин написан на Ajax, и хотя он проверяет поля ввода, он не очень хорош. Вот почему я пытаюсь использовать Jquery для проверки полей, прежде чем Ajax передает данные в базу данных.
Что мне нужно, чтобы это произошло: когда пользователь нажимает кнопку «Отправить», Jquery проверяет поля ввода, а затем, если поля были правильно заполнены, запускается исходный плагин Ajax-скрипт, отправляющий данные. Если Jquery не может проверить все обязательные поля, тогда Ajax не запускается, и пользователю предлагается исправить пропущенные поля.
Что на самом деле происходит: оба сценария запускаются одновременно. Ajax начинает отправлять данные, даже если Jquery установил красные сообщения об ошибках рядом с полями, которые пользователь не смог заполнить.
Я не могу найти способ заставить скрипт Jquery вызвать функцию Ajax при успешной отправке и предотвратить отправку формы в случае, если форма не была успешно проверена.
Вот документация для плагина проверки Jquery: http://docs.jquery.com/Plugins/Validation
Функция, которая управляет тем, что происходит, когда пользователь отправляет успешно проверенную форму, выглядит следующим образом:
var v = $("#tdomf_form%%FORMID%%").validate({
errorClass: "warning",
onkeyup: false,
onblur: false,
submitHandler: function() {
form.submit();
}
Вот два сценария, с которыми я работаю:
<script type="text/javascript">
$(document).ready(function(){
$("#customfields-tf-5-tf").mask("(999) 999-9999");
$("#customfields-tf-11-tf").mask("99%");
// add * to required field labels
$('label.required').append(' <strong>*</strong> ');
// accordion functions
var accordion = $("#stepForm").accordion();
var current = 0;
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element).parents("#sf" + (index + 1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, $.validator.messages.required)
var v = $("#tdomf_form%%FORMID%%").validate({
errorClass: "warning",
onkeyup: false,
onblur: false,
submitHandler: function() {
form.submit();
}
});
// back buttons do not need to run validation
$("#sf2 .prevbutton").click(function(){
accordion.accordion("activate", 0);
current = 0;
});
$("#sf3 .prevbutton").click(function(){
accordion.accordion("activate", 1);
current = 1;
});
// these buttons all run the validation, overridden by specific targets above
$(".open2").click(function() {
if (v.form()) {
accordion.accordion("activate", 2);
current = 2;
}
});
$(".open1").click(function() {
if (v.form()) {
accordion.accordion("activate", 1);
current = 1;
}
});
$(".open0").click(function() {
if (v.form()) {
accordion.accordion("activate", 0);
current = 0;
}
});
});
</script>
<script type="text/javascript">
//<!-- [CDATA[
function ajaxProgressStart%%FORMID%%() {
var w = jQuery('#ajaxProgress%%FORMID%%').width();
var h = jQuery('#ajaxProgress%%FORMID%%').height();
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
var x = offset.left + ((jQuery('#tdomf_form%%FORMID%%').width() - w) / 2);
var y = offset.top + ((jQuery('#tdomf_form%%FORMID%%').height() - h) / 2);
jQuery('#ajaxProgress%%FORMID%%').css({display: 'block', height: h + 'px', width: w + 'px', position: 'absolute', left: x + 'px', top: y + 'px', zIndex: '1000' });
jQuery('#ajaxProgress%%FORMID%%').attr('class','progress');
ajaxShadow%%FORMID%%();
}
function ajaxShadow%%FORMID%%() {
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
var w = jQuery('#tdomf_form%%FORMID%%').width();
var h = jQuery('#tdomf_form%%FORMID%%').height();
jQuery('#shadow%%FORMID%%').css({ width: w + 'px', height: h + 'px', position: 'absolute', left: offset.left + 'px', top: offset.top + 'px' });
jQuery('#shadow%%FORMID%%').css({zIndex: '999', display: 'block'});
jQuery('#shadow%%FORMID%%').fadeTo('fast', 0.2);
}
function ajaxUnshadow%%FORMID%%() {
jQuery('#shadow%%FORMID%%').fadeOut('fast', function() {jQuery('#tdomf_shadow').hide()});
}
function ajaxProgressStop%%FORMID%%() {
jQuery('#ajaxProgress%%FORMID%%').attr('class','hidden');
jQuery('#ajaxProgress%%FORMID%%').hide();
ajaxUnshadow%%FORMID%%();
}
function tdomfSubmit%%FORMID%%(action) {
ajaxProgressStart%%FORMID%%();
var mysack = new sack("http://www.loftist.com/wp-content/plugins/tdo-mini-forms/tdomf-form-ajax.php" );
mysack.execute = 1;
mysack.method = 'POST';
mysack.setVar( "tdomf_action", action );
mysack.setVar( "tdomf_args", jQuery('#tdomf_form%%FORMID%%').serialize());
mysack.onError = function() { alert('TDOMF: ERROR with AJAX request.' )};
mysack.runAJAX();
return true;
}
function tdomfDisplayMessage%%FORMID%%(message, mode) {
if(mode == "full") {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','hidden');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = "";
document.tdomf_form%%FORMID%%.innerHTML = message;
jQuery('#tdomf_form%%FORMID%%').focus();
var offset = jQuery('#tdomf_form%%FORMID%%').offset();
window.scrollTo(offset.left,offset.top);
} else if(mode == "preview") {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_preview');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
jQuery('#tdomf_form%%FORMID%%_message').focus();
var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
window.scrollTo(offset.left,offset.top);
} else {
jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_message');
document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
window.scrollTo(offset.left,offset.top);
jQuery('#tdomf_form%%FORMID%%_message').focus();
}
ajaxProgressStop%%FORMID%%();
}
function tdomfRedirect%%FORMID%%(url) {
//ajaxProgressStop%%FORMID%%();
window.location = url;
}
//]] -->
</script>
Редактировать: Вот код кнопки «Отправить»:
<input name="tdomf_form%%FORMID%%_send" type="submit" id="tdomf_form%%FORMID%%_send" value="Send" class="submitbutton" onclick="tdomfSubmit%%FORMID%%('post'); return false;" alt="Submit" title="Submit" />