Проверка формы jQuery перед отправкой Ajax

бит JavaScript:

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {     

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });     

            })
    });

бит HTML:

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

Итак, это код, который я пытаюсь использовать. Идея состоит в том, чтобы проверить все мои входы до того, как я отправлю свою форму с помощью Ajax. Я пробовал множество версий этого сейчас, но каждый раз, когда я заканчиваю отправкой, даже если форма не полностью заполнена. Все мои входы имеют "необходимый" класс. Может ли кто-нибудь увидеть, что я делаю неправильно?

Кроме того, я полагаюсь на требования к классам, так как мои имена ввода генерируются с помощью php, поэтому я никогда не могу быть уверенным, какое имя [id] или типы ввода я получаю.

Я показываю/скрываю вопросы, когда я просматриваю их на "страницах".

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

JS:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }

Ответы

Ответ 1

Вы можете использовать параметр submitHandler. По существу, вызов $.ajax внутри этого обработчика, т.е. Инвертирует его с помощью логики настройки проверки.

$('#form').validate({

    ... your validation rules come here,

    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {
                $('#answers').html(response);
            }            
        });
    }
});

Плагин jQuery.validate будет вызывать обработчик отправки, если проверка прошла.

Ответ 2

сначала вам не нужно явно добавлять classRules, так как required автоматически определяется плагином jquery.validate. поэтому вы можете использовать этот код:

  • в форме submit, вы предотвращаете поведение по умолчанию
  • Если форма недействительна, прекратите выполнение.

  • else, если действительный отправляет запрос ajax.

    $('#form').submit(    function(e){     

            e.preventDefault();
            var $form = $(this);

          // check if the input is valid
            if(! $form.valid()) return false;

           $.ajax({
                type: 'POST',
                url: 'add.php',
                data: $('#form').serialize(),
                success: function(response) {
                    $("#answers").html(response);
                }

            });
        });

Ответ 3

Вы можете попробовать:

if($("#form").validate()) {
 return true;
} else {
 return false;
}

Ответ 4

Этот конкретный пример будет просто проверять входные данные, но вы можете его настроить, однако добавьте что-то подобное к вашей функции .ajax:

beforeSend: function() {                    
    $empty = $('form#yourForm').find("input").filter(function() {
        return this.value === "";
    });
    if($empty.length) {
        alert('You must fill out all fields in order to submit a change');
        return false;
    }else{
        return true;
    };
},

Ответ 5

Я думаю, что сначала проверяю форму, и если будет проходить валидация, я бы сделал сообщение ajax. Не забудьте добавить "return false" в конце script.

Ответ 6

Я думаю, что submitHandler с проверкой jquery является хорошим решением. Пожалуйста, получите представление об этом коде. Вдохновленный от @Darin Dimitrov

$('.calculate').validate({

                submitHandler: function(form) {
                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        data: $(form).serialize(),
                        success: function(response) {
                            $('#'+form.id+' .ht-response-data').html(response);
                        }            
                    });
                }
            });

Ответ 7

> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##

$("form#data").validate({
    rules: {
        first: {
                required: true,
            },
        middle: {
            required: true,
        },          
        image: {
            required: true,
        },
    },
    messages: {
        first: {
                required: "Please enter first",
            },
        middle: {
            required: "Please enter middle",
        },          
        image: {
            required: "Please Select logo",
        },
    },
    submitHandler: function(form) {
        var formData = new FormData($("#image")[0]);
        $(form).ajaxSubmit({
            url:"action.php",
            type:"post",
            success: function(data,status){
              alert(data);
            }
        });
    }
});

Ответ 8

Формировать встроенную функцию JavaScript checkValidity более чем достаточно для запуска проверки HTML5

$(document).ready(function() {
    $('#urlSubmit').click(function() {
        if($('#urlForm')[0].checkValidity()) {
            alert("form submitting");
        }
    });
});