Функция onclick Javascript останавливает HTML5, требуемый от работы

Добрый день,

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

У меня есть две кнопки отправки на моей странице, используя функцию onclick submitform; Один открывает новую вкладку, а другой отправляет форму и переходит на новую страницу.

В целях отладки я удаляю кнопку, которая открывает новую вкладку и удаляет атрибут onclick на моей второй кнопке, и она работает; Я весь день работаю в Google, но я не могу найти тот же самый сценарий, который у меня есть на данный момент.

Я считаю, что это связано с моим JS, но я не уверен, что добавить или удалить в моем коде; См. Мой код ниже.

JavaScript

function submitForm(action,newtab)
 {
 document.getElementById('add2').target = newtab ? '_blank' : '_self';
 document.getElementById('add2').action = action;
 document.getElementById('add2').submit();
 }

HTML

<form id="add2" action="add5.php" method="post">
 
 
 <button tabindex="3" value="Save" name="save" onclick="submitForm('add3.php',1);" type="submit">Child Information</button>
 <button tabindex="4" value="Save" name="save" onclick="submitForm('add5.php',0);" type="submit">Save Details</button>
 </form>

У меня есть атрибут кнопки, но я установил его для type = "submit", и я уверен, что работает, поскольку я уже тестировал его, когда я удалял функции onclick; Мой вопрос: может ли я потребовать, чтобы атрибут работал без удаления функции onclick JavaScript?

Любая помощь очень ценится.

3 ответа

Я нашел ответ на свой вопрос. Проблема в том, что я привязывал метод onClick к submit. OnClick запускает сначала, что приводит к тому, что он проходит мимо валидатора.

Решение: я изменяю onClick на onSubmit в своем HTML-коде.

<button tabindex="3" value="Save" name="save" onsubmit="submitForm('add3.php',1);" type="submit">Child Information</button>
<button tabindex="4" value="Save" name="save" onsubmit="submitForm('add5.php',0);" type="submit">Save Details</button>


Вам просто нужно использовать метод "checkValidity()" в форме перед отправкой в ​​вашу функцию onclick следующим образом:

if($("#add2").checkValidity()) { 
 document.getElementById('add2').submit();
}

Смотрите эту скрипту: http://jsfiddle.net/36uv2e52/33/


Вместо использования required вы можете просто проверить значения перед отправкой.

function submitForm(action,newtab) {
 fname = document.getElementById('fname').value;
 lname = document.getElementById('lname').value;
 if (fname == "" || lname == "") {
 alert("First and last name are required");
 exit;
 } else {
 document.getElementById('add2').target = newtab ? '_blank' : '_self';
 document.getElementById('add2').action = action;
 document.getElementById('add2').submit();
 }
 }

licensed under cc by-sa 3.0 with attribution.