Событие submit и обработчик события

215

29 июля 2018, 06:10

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

Пробовал сие на г**нокоде, который привожу ниже. Как быть, если я всё таки хочу провести валидацию по событию сабмит на форме?

<!DOCTYPE html> 
<html> 
    <head> 
 
    </head> 
    <body> 
        <form id="form" action="#" method="POST"> 
            <input type="number" min="10"> 
            <button type="submit"></button> 
        </form> 
        <script> 
            var somefun = function () { 
                console.log('happend'); 
            }; 
            var elementForm = document.querySelector('#form'); 
            elementForm.addEventListener('submit', somefun); 
        </script> 
    </body> 
</html>

Answer 1

Можно ли при появлении события submit на форме использовать собственный обработчик, чтобы произвести валидацию?

var elementForm = document.querySelector('#form'); 
// Нужно поймать событие "e" 
elementForm.addEventListener('submit', function(e) { 
  e.preventDefault(); // Остановить форму от посылки на сервер 
  //------------------------------------------------------------ 
  // Your validation goes here 
  console.log('happened'); 
});

<form id="form" action="#" method="POST"> 
  <input type="number" min="10"> 
  <button type="submit">Submit</button> 
</form>

Answer 2

Добавьте в <form> атрибут onsubmit = "return formValidation()", а в функции используйте return true; для отправки формы на сервер или return false; для отмены.

function formValidation() { 
  alert("Валидация формы"); 
  return false; 
}

<form id="form" action="#" method="POST" onsubmit="return formValidation()"> 
  <input type="number" min="10"> 
  <button type="submit">Submit</button> 
</form>

Answer 3

Для отключения проверки браузером можно воспользоваться атрибутом novalidate на форме

var somefun = function() { 
  console.log('happend'); 
}; 
var elementForm = document.querySelector('#form'); 
elementForm.addEventListener('submit', somefun);

<form id="form" action="#" method="POST" novalidate> 
  <input type="number" min="10"> 
  <button type="submit">btn</button> 
</form>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как скачать apk, сделанный на NativeScript?

Потестировал платформу NativeScript для создания мобильных приложений на JS/HTML

233

HTML

Как можно реализовать данную карточку?

Испробовал уже несколько вариантов - через float, inline-block и flex, но верстка постоянно едет и возникает проблема с вертикальным выравниваем строк,...

227

HTML

Смена файла css через javascript

Как можно реализовать при нажатии на ссылку или любой другой элемент css файл менялся на другой или просто смену фона и цвета текста если так...

246

HTML

Не отображается контент slick slider

нужно чтобы при нажатии на одну из трёх ссылок появлялся слайдер с товарамина самом деле он появляется, например если нажать на ссылку "распродажа"...

210