Нажатие клавиши ввода в любом текстовом поле в Chrome вызывает отправку формы, даже если нет кнопки отправки

Question

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

<form>
  <input type="button" value="Submit the Form" onclick="validateAndSubmit()" />
</form>
<script language="javascript">

   function validateAndSubmit(){
   //do some validation and then submit 
 }

</script>

В Firefox это работает отлично. В Chrome, когда я нажимаю клавишу ввода в любом месте страницы, отправка формы запускается и проверка не работает. Есть ли что-то, чтобы этого избежать? Разве браузер не должен отправлять форму, когда мы нажимаем кнопку ввода, если нет кнопки отправки?

Answer 1

используйте этот синтаксис:

<form onsubmit="return validateAndSubmit()">
...

, если вам нужно перехватить клавишу возврата, возможно, вы можете справиться с ней, связав событие keydown со входом и выполнив некоторое действие с keyCode # 13

Answer 2

Попробуйте этот метод:

<form onsubmit="return validateAndSubmit(this);">
  <input type="submit" value="Submit the Form"/>
</form>
<script language="javascript">

   function validateAndSubmit(form_obj){
     if(some_variable == 'correct_value') {
        form_obj.submit();
        return true;
     } else {
        alert('Wrong value');
        return false;
     }
   //do some validation and then submit 
 }

</script>

Answer 3

Я не уверен, есть ли стандарт в отношении этого или нет.

Несмотря на это, вы можете полностью избавить себя от неприятностей, просто приняв более сильную стратегию: реализуйте проверку в виде действия onsubmit в форме, а не действия onclick для кнопки. Я почти никогда не использую кнопки в формах; необходимость сделать это для вас только отбросит меня, а это плохо для пользователей.

Так или иначе. Форма onsubmit это путь. И я был бы признателен, если бы вы использовали ненавязчивый Javascript вместо атрибутов HTML:)