jQuery validationEngine

Question

Я абсолютный нуб с jQuery и js, и я уверен, что есть более элегантное решение, чем то, что я придумал, - но это то, что у меня так далеко, и я в замешательстве.

У меня есть форма, отправка которой по разным причинам занимает много времени - я использую validationEngine для проверки встроенных полей формы, что прекрасно работает. Затем мне нужно было добавить всплывающий элемент div, чтобы сообщить посетителю, пожалуйста, наберитесь терпения, почему приложение выполняет запрошенный поиск.

Мое оригинальное решение работало отлично, примите во внимание, что всплывающий элемент div показывал, когда посетитель нажимал кнопку отправки, независимо от того, была ли форма полностью заполнена или нет - если форма полностью заполнена, все работает, как ожидалось, - если они пропускают поле validationEngine показывает уведомление о пропущенном поле, и мой всплывающий элемент div все еще отображается, но, очевидно, форма не отправляется. Что происходит с этим кодом:

jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
});

    $(document).ready(function() {
        $('#approvalForm').submit(function() {
            $('#progress').show();
            });
        });

Итак, после некоторых исследований я сделал несколько модификаций, которые привели к следующему коду:

    jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach', {
        onValidationComplete: function(form, status){
        if (status == true) {
            $('#approvalForm').submit(function() {
                    $('#progress').show();
                });
        }
             }
     });
});

И теперь все работает правильно, за исключением того, что вам нужно дважды нажать кнопку отправки, и когда вы делаете это, всплывающее окно появляется, но форма не отправляется.

Answer 1

$('#form1').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status == true) {                   
            startProgressBar();
            form.validationEngine('detach');
            form.submit();

        }
    }           
});

Answer 2

вам нужно

$('#approvalForm').validationEngine('attach', {
    onValidationComplete: function(form, status){
        if (status) {                   
            startProgressBar();
            YouFunctionPreLoad();
            return true;
            //form.submit();
        }
    }           
});

Answer 3

onValidationComplete останавливает отправку формы и позволяет вам обрабатывать вещи самостоятельно.В этом случае все, что вы хотите сделать, это отобразить всплывающее окно загрузки, когда проверка прошла успешно.Поэтому вместо этого вы можете подключиться к результату проверки и, если он прошел, показать всплывающее окно загрузки.Форма отправки будет активирована в обычном режиме.

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#approvalForm").validationEngine('attach');
    jQuery("#approvalForm").bind("jqv.form.result", function(event, errorFound) {
        if(!errorFound) $('#progress').show();
    })
});
</script>

Answer 4

jQuery("#approvalForm").validationEngine('attach', {
    onValidationComplete: function(form, status){
    if (status == true) {
        $('#progress').show();
        $('#approvalForm').trigger('submit');
    }else{
        $('#progress').hide();
    }
}

Но я думаю, что если вы хотите отобразить всплывающее окно загрузки,
вы должны использовать jQuery.ajax

Он имеет beforeSend функцию, которая будетзапустить до того, как браузер отправит запрос.