jQuery .submit() с проверкой и без обновления страницы

У меня есть проблема, которая, кажется, есть у других, но я не могу заставить работать рекомендуемое решение (т. е. "вернуть false;"). Любая помощь будет здорово!

Описание:

Когда форма отправлена, я хочу проверить правильность ввода (например, type="email") и запустить оповещение (например, "Форма отправлена") без обновления страницы . В настоящее время предупреждение не появляется, и страница обновляется.

Тестовый код:

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <!-- Form -->
        <form>
            <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
            <button type="submit" id="submit">Submit</button>
        </form>

        <!-- Alert on Submission -->
        <script>
            console.log("Ready to Go!");
            $('#submit').submit(function () {
                alert("Form submitted.");
                return false;
            });
        </script>
    </body>
</html>

javascript validation html jquery form-submit
person Jesse    schedule 07.10.2014    source источник
comment
Со временем страницу нужно будет обновить, если вы не переключитесь на публикацию AJAX. Вы просто пытаетесь поймать ошибки, а затем, наконец, отправить после их исправления?   -  person Cᴏʀʏ    schedule 08.10.2014
comment
Зачем вообще использовать кнопку отправки? Почему не обычная кнопка с событием клика?   -  person antlersoft    schedule 08.10.2014
comment
Кстати, 25 пикселей не является допустимым размером для входных данных, вам просто нужно 25: w3schools. com/tags/att_input_size.asp   -  person Ben Temple-Heald    schedule 08.10.2014

Ответы (4)


arrow_upward
4
arrow_downward

Вы захотите поймать событие submit формы. На кнопке нет события submit.

        $('form').submit(function () {
            if (*everything ok*) {
                alert("Form submitted.");
            } else {
                return false;
            }
        });

В идеале вы должны помочь идентифицировать свой <form> либо по идентификатору, либо по классу, т. е.:

<form id="xyz-form">

А затем измените свой селектор на:

$('#xyz-form').submit(...);

Теперь это только для того, чтобы остановить отправку формы при наличии ошибок. Когда return false; не является путем обратного вызова отправки, ваша страница будет обновляться. Если вы хотите отправить данные на сервер без обновления, вам нужно будет подойти к этому иначе.

person Cᴏʀʏ    schedule 07.10.2014
comment
могу я смиренно предложить $("#submit").closest("form") ? - person Kyborek; 08.10.2014
comment
@Kyborek: Да, можно! Добавлено несколько слов для улучшения селектора. - person Cᴏʀʏ; 08.10.2014

arrow_upward
2
arrow_downward

Дайте вашей форме идентификатор и измените свой jquery, чтобы вместо этого использовать #formid.

Например :

<form id="form">
    <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
    <button type="submit" id="submit">Submit</button>
</form>

<script type="text/javascript">
    $('#form').submit(function () {
        alert("Form submitted.");
        return false;
    });
</script>
person Ben Temple-Heald    schedule 07.10.2014

arrow_upward
0
arrow_downward

Обработчик событий, прикрепленный к функции отправки в jQuery, может быть элементом формы или элементом div. Подробнее о jQuery API. Вы можете реализовать событие щелчка, когда пользователь нажимает кнопку отправки без ее поведение отправки по умолчанию с функцией jQuery preventDefault

console.log("Ready to Go!");
            $('form').submit(function () {
                alert("Form submitted.");
                return false;
            });
$("#submit").click(function(e){
      if (hasError){
          e.preventDefault();
      }
      else{
         alert("success");
      }
 })

Операторы if и else созданы для простой проверки. В рамках вашего вопроса я оставляю большую часть кодирования для вашего творчества. Но вы можете в основном создать простую функцию для проверки ошибок с пользовательскими входами, если есть ошибки, предотвратить поведение кнопки отправки по умолчанию. Если входные данные не пусты и если входные данные не содержат ошибок, предупредите пользователя о том, что форма была отправлена.

person Nicki Chen    schedule 07.10.2014

arrow_upward
-2
arrow_downward

попробуйте это вместо

    $('#submit').click(function () {
        alert("Form submitted.");
        return false;
    });

это сделает то, что вы хотите.

в основном щелчок срабатывает перед отправкой

попробуйте этот фрагмент, чтобы прояснить ситуацию

 console.log("Ready to Go!");

$('#submit').click(function () {
  alert("Form submitted.");
  //return false;
  return true;
});

$("form").submit(function( event ) {
  alert("woot woot");
});
person Pav    schedule 07.10.2014
comment
Это все равно отправит форму. - person Cᴏʀʏ; 08.10.2014