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

170
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>

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

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

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

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

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

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

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

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

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

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

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

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

 162