Проверка HTML5, когда тип ввода не "отправляет",

Ответ 1

Процесс проверки формы HTML5 ограничивается ситуациями, когда форма отправляется через кнопку отправки. В алгоритме представления формы явно говорится, что проверка не выполняется, когда форма отправляется с помощью метода submit(). По-видимому, идея состоит в том, что если вы отправляете форму через JavaScript, вы должны сделать валидацию.

Однако вы можете запросить (статическую) проверку формы в отношении ограничений, определяемых атрибутами HTML5, с помощью метода checkValidity(). Если вы хотите отображать те же сообщения об ошибках, что и браузер в форме проверки HTML5, я боюсь, что вам нужно будет проверить все ограниченные поля, поскольку свойство validityMessage является свойством полей (элементов управления), а не формой, В случае одного ограниченного поля, как и в представленном случае, это, конечно, тривиально:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById('example').validationMessage);
  }
}

Ответ 2

Возможно, я опаздываю, но способ, которым я это сделал, - создать скрытый ввод ввода и вызвать его обработчик клика при отправке. Что-то вроде (используя jquery для простоты):

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">

<script>
function submitform() {
    $('#submit_handle').click();
}
</script>

Ответ 3

Вы должны использовать тег формы, вмещающий ваши входы. И введите тип submit.
Это работает.

<form id="testform">
<input type="text" id="example" name="example"  required>
<button type="submit"  onclick="submitform()" id="save">Save</button>
</form>

Так как проверка HTML5 работает только с кнопкой отправки, вы должны сохранить ее там. Вы можете избежать отправки формы, но когда это действительно, если предотвратить действие по умолчанию, написав обработчик событий для формы.

document.getElementById('testform').onsubmit= function(e){
     e.preventDefault();
}

Это даст вам подтверждение, если оно недействительно, и не будет отправлять форму, когда она действительна.

Ответ 4

Попробуйте с помощью <button type="submit"> вы можете выполнить функциональные возможности submitform(), выполнив <form ....... onsubmit="submitform()">

Ответ 5

Работа по проверке HTML5 только Когда тип кнопки будет отправлен

изменить -

<button type="button"  onclick="submitform()" id="save">Save</button>

To -

<button type="submit"  onclick="submitform()" id="save">Save</button>

Ответ 6

Либо вы можете изменить тип кнопки на submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

Или вы можете скрыть кнопку отправки, сохранить еще одну кнопку с типом = "button" и нажать на кнопку для этой кнопки

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

Ответ 7

Попробуйте следующее:

<script type="text/javascript">
    function test
    {
        alert("hello world");  //write your logic here like ajax
    }
</script>

<form action="javascript:test();" >
    firstName : <input type="text" name="firstName" id="firstName" required/><br/>
    lastName : <input type="text" name="lastName" id="lastName" required/><br/>
    email : <input type="email" name="email" id="email"/><br/>
    <input type="submit" value="Get It!" name="submit" id="submit"/>
</form>

Ответ 8

Я хотел добавить новый способ сделать это, с которым я только недавно столкнулся. Несмотря на то, что проверка формы не выполняется, когда вы отправляете форму с помощью метода submit(), вам ничего не мешает вам щелкнуть кнопку отправки программно. Даже если он скрыт.

Имея форму:

<form>
    <input type="text" name="title" required />
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button>
    <button type="button" onclick="doFancyStuff()">Submit</button>
</form>

Это приведет к проверке формы:

function doFancyStuff() {
    $("#submit-button").click();
}

Или без jQuery

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

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

Здесь ОЧЕНЬ простой jsfiddle, показывающий концепцию:

https://jsfiddle.net/45vxjz87/1/