Проверка JQuery - как я могу предотвратить автоматическую отправку?

Question

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

На самом деле, я не совсем уверен, почему моя форма отправляется, учитывая, что мои кнопки не относятся к типу submit, а просто <button></button>.

<form id="my_form" name="my_form" method="post" action="">
    ...
    <button id="previous_button" class="nav-button">Previous</button>
    <button id="next_button" class="nav-button">Next</button>
</form>

и мой прослушиватель onClick, в котором я надеюсь, что при правильном вводе я смогу опубликовать данные формы и затем перейти на новую страницу, иначе измените положение окна, чтобы пользователь увидел окно «error_messages», где все мои сообщения об ошибках показать вверх.

$('#next_button').click(function(event) {
    validateAndSave();
});

function validateAndSave() {
    if($('#my_form').valid()) {
        $.post('save_form_to_database.php', 
            $('#my_form').serialize());
        window.location = 'next_page.php';
    } else {
        // reposition to see the error messages
        window.location = '#error_messages';
    }
}

Хотя результат (и результат тот же, независимо от того, установлено ли для * 1012 значение true или false), при правильном вводе я могу видеть по строке состояния, что `next_page.php 'на короткое время мигает и затем меня снова возвращают на мою исходную страницу. Кроме того, при неудачной проверке моя страница, похоже, неправильно перемещается.

Итак, мои вопросы:

• Почему моя страница перенаправляется обратно на исходную страницу?

• Как я могу использовать валидатор для проверки, но затем опубликовать форму по-своему, используя $ .post?

Большое спасибо заранее.

Обновление благодаря ответам

Согласно этой странице на элементе кнопки :

Атрибут TYPE для BUTTON указывает тип кнопки и принимает значение submit (по умолчанию), reset или кнопку

Так что мои кнопки принимали значение по умолчанию type="submit"

Answer 1

Укажите ваши кнопки как type = "button", чтобы остановить автоматическую отправку.Этот получает меня все время.

Answer 2

Why is my page being redirected back to the original page?

Понятия не имею;как вы сказали, это кнопка, а не тип ввода = "отправить", поэтому она не должна отправляться.Если вы удалите обработчик JS, он все еще отправляет?

How can I use the validator to validate, but then post the form my own way using $.post?

Верните false (из обработчика щелчка, чтобы убедиться, что вы не запускаете это странное поведение кнопки) и используйте обратный вызов, чтобы отправить пользователяследующая страницаПрямо сейчас начинается ваш POST, и вы сразу переходите на следующую страницу.Я думаю, что вы хотите сделать, это перейти на следующую страницу ПОСЛЕ возврата POST, и для этого вам просто нужно поместить ваш window.location в функцию обратного вызова, которую вы передаете $ .post.

Надеемся,это помогает, но если не отправлять обратно.

Answer 3

$('#next_button').click(…);

Вместо привязки к событию нажатия кнопки, привязка к событию отправки формы.

Я считаю, что это более надежный способ отследить отправляемую форму, ивы можете вернуть false из обработчика события или вызвать .preventDefault() для объекта события, чтобы остановить отправку формы.

Answer 4

Вы должны добавить

 return false;

Внутри функции validateAndSave.Таким образом, вы можете отклонить отправку и обработать сообщение с помощью js.