Объедините jQuery preventDefault и обязательные входные данные формы

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

Добавление preventDefault к обработчику отправки показывает пользователю обязательные поля, но по-прежнему запускает событие щелчка, привязанное к кнопке.

Мне нужны оба.

<form action="" method="post">
  <input type="text" class="class" id="id" name="name" required="required" />
</form>

Теперь js:

$("button").click(function(event){
  event.preventDefault();
  //performs function
});

Это вызовет событие щелчка независимо от требуемого ввода формы.

$("form").submit(function(event){
  event.preventDefault();
});
$("button").click(function(){
  //performs function
});

Это покажет требуемое сообщение пользователю, но по-прежнему будет выполнять функцию кнопки отправки. Как мне сделать оба? Я просмотрел некоторые другие вопросы SO, которые я мог найти по этому поводу, но, похоже, на большинство из них можно ответить, добавив preventDefault в form.submit.


javascript jquery required-field preventdefault
person o_O    schedule 01.06.2013    source источник
comment
Попробуйте это $("form").submit(function(event){ return false; });   -  person Sushanth --    schedule 01.06.2013

Ответы (2)


arrow_upward
7
arrow_downward

На самом деле я пытался сделать две вещи, когда мне нужно было сделать только одну.

Мне вообще не нужна функция button.click, так как по умолчанию она отправляет форму. Мне просто нужно было поместить функцию button.click внутри form.submit.

$("form").submit(function(event){
    //perform button function
    return false;
});
person o_O    schedule 02.06.2013

arrow_upward
0
arrow_downward

Вручную запустите событие отправки.

$("button").click(function(event) {
     event.preventDefault();

     $('form').submit();
});
person Ehtesham    schedule 01.06.2013