Есть форма, в ней 2 обязательных поля (стоит тег required).
Данные отправляются по событию onclick у кнопки через ajax.
Можно как-нибудь совместить валидацию формы html-ем и передачу данных через ajax?
Естественно есть убрать обработку нажатия кнопки js-ом, то форма валидируется html-ем и все гуд.
для начала хотелось бы проверить просто что поля заполнены (т.к. это обязательно). Насколько я понимаю как только я ставлю обработчик нажатия кнопки JS валидания html-ем перестает работать. Пробовал так же использовать не onclick а onsubmit, но тоже работает криво.
По идее если использовать onsubmit, то js должен отрабатывать после того как форма валидировалась html-ем, но она как я понимаю после валидации заодно и отправляется на страницу обработки.
Выход получается писать валидатор на JS и отключать submit используя preventdefault()?
sbh, я обычно делаю так:
На поля формы добавляю нужные аттрибуты (required, pattern и прочее), добавляю кнопку отправки с type=submit, никакие обработчики кроме onsubmit не вешаю.
В этом случае при отправке формы (не важно, кнопкой или нажатием на enter в любом из полей, НО НЕ методом form.submit() из JS) - сначала выполняется валидация полей с required, pattern или новыми в HTML5 типами полей input (email, phone и т.п.), а потом только при правильности вызывается событие onsubmit.
В событии, в свою очередь, делаю следующее:
1) отменяю стандартное событие отправки формы
2) вешаю на кнопку submit disabled=true, дабы юзер не мог вдавить enter и отправить её много раз или отправить даблкликом (некоторые чайники не отличают одинарный клик от двойного и пользуются в браузере двойным).
3) делаю доп. валидацию если надо (которую невозможно стандартными средствами сделать)
4) если всё прошло, то заворачиваю поля формы в FormData и кидаю их через ajax.
Ну и на стороне сервера не забываю проверять.
Ещё при этом не забыть повесить какой-нибудь обработчик на поля, дабы при изменении полей убирать disabled с кнопки отправки, чтобы в случае, если отправка формы по каким-то причинам не прошла и форма оказалась заблочена, юзер смог отредактировать поля и отправить вновь (либо делать это после получения ответа от ajax или отваливания этого ответа по тайм.ауту)
Сложный
Простой
