Запретить отправку формы с помощью ajax, если поля формы пусты

ProgramBox

Запретить отправку формы с помощью ajax, если поля формы пусты

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #ajax

Вопрос:

У меня возникли некоторые проблемы с простой формой. Кажется, я не могу запретить отправку формы, если поля пусты. Есть ли простой способ проверить, пусты ли поля, а затем запретить отправку формы?

Вот моя html-форма:

 <form method="post" name="simpleForm" id="simpleForm" action="handler.php">
<fieldset>
    <legend>Info</legend>
            <p><label for="name">Name</label><br>
            <input id="name" name="name" class="text" /></p>
            <p><label for="email">Email</label><br>
            <input id="email" name="email" class="text" /></p>

    <legend>Questions</legend>
            <p><label for="qs_1">Question 1</label><br>
            <input id="qs_1" name="qs_1" class="text" /></p>
            <p><label for="qs_2">Question 2</label><br>
            <input id="qs_2" name="qs_2" class="text" /></p>
            <p><label for="qs_3">Question 3</label><br>
            <input id="qs_3" name="qs_3" class="text" /></p>

</fieldset>             

<p><input type="submit" name="submit" value="Send" id="sub_btn" /></p>
</form>

Вот мой javascript:

 $("form#simpleForm").submit(function() {

        var name     = $('#name').attr('value');
        var email    = $('#email').attr('value');
        var qs_1     = $('#qs_1').attr('value');
        var qs_2     = $('#qs_2').attr('value');
        var qs_3     = $('#qs_3').attr('value');



            $.ajax({
                type: "POST",
                url: "handler.php",
                data: "name="  name  "amp; email="  email  "amp; qs_1="  qs_1  "amp; qs_2="  qs_2  "amp; qs_3="  qs_3,
                success: function(){
                    $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

                }
            });
        return false;
});

1. не использовать $('#name').attr('value') , а использовать $('#name').val()

2. Вместо того , чтобы использовать .attr('value') , вместо этого используйте .val() . Улучшенная кроссбраузерная совместимость.

Ответ №1:

Используется e.preventDefault() для отмены отправки формы. Если вы не хотите отправлять вызов AJAX, добавьте проверку условий. Кроме того, используйте .val() вместо .attr("value") .

 $("form#simpleForm").submit(function(ev) {
    ev.preventDefault();

    var name     = $('#name').val();
    var email    = $('#email').val();
    var qs_1     = $('#qs_1').val();
    var qs_2     = $('#qs_2').val();
    var qs_3     = $('#qs_3').val();

    //This condition will only be true if each value is not an empty string
    if(name amp;amp; email amp;amp; qs_1 amp;amp; qs_2 amp;amp; qs_3){
        $.ajax({
            type: "POST",
            url: "handler.php",
            data: "name="  name  "amp; email="  email  "amp; qs_1="  qs_1  "amp; qs_2="  qs_2  "amp; qs_3="  qs_3,
            success: function(){
                $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

            }
        });
     }
     return false; //IE
});

1. Функция preventDefault() не работает в IE, для IE используйте event.cancelBubble = true;

2. return false; , который уже был у запрашивающего, должен делать то же самое. Вопрос был о том, как предотвратить отправку, если какие-либо / все поля пусты.

3. @GregL Preventdefault был дополнительным. Я предложил 3 изменения в своем ответе.

4. @RobW, я, должно быть, слепой, я изначально думал, что ваш ответ был неправильным, но я явно ошибался. Приношу свои извинения, сэр.

5. Работает отлично! Многому научился из этого. Спасибо!

Ответ №2:

В общем смысле, если вы вернете false из обработчика отправки, это предотвратит отправку формы стандартным (не ajax) способом, но я вижу, что вы уже делаете это — что вам нужно, если вы хотите отправить его через ajax вместо этого, или он вызовет ajax и отправит обычно.

Итак, все, что вам нужно для вашей проверки, это установить тест if, который выполняет $.ajax() вызов только в том случае, если проверка прошла успешно:

 if (name != "" amp;amp; etc...) {
   $.ajax({ /* your existing ajax code here */ });
}

РЕДАКТИРОВАТЬ: вы также можете проверить, нет ли пустых полей с помощью одного селектора jQuery:

 if ($("#simpleform :text[value='']").length === 0) {
   $.ajax({ /* your existing ajax code here */ });
}

Ответ №3:

Просто проверьте if перед отправкой ajax-запроса:

 if(name != '' amp;amp; email != '' ...)
{
//send request is true
$.ajax({
                type: "POST",
                url: "handler.php",
                data: "name="  name  "amp; email="  email  "amp; qs_1="  qs_1  "amp; qs_2="  qs_2  "amp; qs_3="  qs_3,
                success: function(){
                    $('form#simpleForm').hide(function(){$('div.success').fadeIn();});

                }
            });

}

else{
return false;
}

1. Хорошая попытка, но обратите внимание на замечание, сделанное в других ответах — вам нужно возвращать false независимо от того, выполняется условие if или нет, в противном случае форма выполнит обычную отправку, что, вероятно, нежелательно.

Ответ №4:

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

      function validateForm(data){
         var is_valid = true;
         $.each(data, function(id, obj) {
             if(obj.value === "") {
                 is_valid = false;
             }
         });   
         return is_valid;         
     }

data Аргумент должен быть сериализованной формой json.

Использование:

     var form_data = $( "#my_form" ).serializeArray();
    var is_valid = validateForm(form_data);

    if(is_valid === true){
        // your ajax code
    }

Метки: Запретить отправку формы с помощью ajax если поля формы пусты