Когда вы применяете проверку HTML через HTML к элементу формы, и значение этого элемента не соответствует критериям проверки, форма НЕ будет отправлена.
Но, если вы используете JavaScript, вам придется взять под контроль этот процесс. Самый простой способ - просто проверить правильность формы.
«Но когда дело доходит до отправки формы с помощью JavaScript, следует ли мне повторно проверять каждое поле?»
Как вы увидите в моем фрагменте, вам нужно будет проверить форму, и это можно сделать одним простым вызовом метода. При необходимости вы можете проверить каждый элемент, чтобы увидеть, какие из них являются недействительными и почему и действуют соответственно.
«Другими словами, проверка HTML5 только визуальный артефакт, это не мешает представление формы Если пользователь хочет ввести неправильное содержание Игнорируя красный флаг, он может это сделать.».
Когда вы придерживаетесь только HTML и не используете JavaScript, то проверка является более чем просто визуальной. Форма не будет отправлена. Эта функциональность испечена в HTML5-совместимых браузерах.
«Если я прав, почему я должен использовать HTML для выполнения чего-то, что я могу (и должен) делать с JS? Может быть, для JS есть способ узнать, что все нормально, без дополнительной проверки ».
Опять же, использование только разметки HTML предоставит вам множество валидаторов (обязательно, шаблон, номер и т. Д.), И они будут работать прямо из коробки. Тем не менее, вы не сможете контролировать то, что говорят валидационные сообщения, или точно, когда и где они будут отображаться (или даже как они выглядят). Это зависит от браузера. Вот почему спецификация HTML5 Forms включает очень надежный API (через JavaScript) - для того, чтобы вы могли полностью контролировать процесс проверки и уведомления.
var btn = document.getElementById("btnSubmit");
var frm = document.getElementById("frmTest");
btn.addEventListener("click", function(){
// The HTML 5 Forms API provides a .checkValidity()
// method to your form object so that you can know
// if the form is valid or not:
if(frm.checkValidity()){
frmTest.submit();
}
});
<form method=post action="http://www.somewhere.com" id=frmTest>
<input required>
<input type=button id=btnSubmit value=submit>
</form>
Вот основная функция JavaScript, которая демонстрирует то, что вы можете сделать с помощью HTML5 Forms API:
// Custom form validation logic:
function validate(evt) {
// An HTML5 form has a checkValidity() method which forces it
// to examine the validity of all controls that know how to validate
// and it returns a boolean indicating if ALL these controls are valid
// or if any ONE of them is not.
var valid = theForm.checkValidity();
if (valid) {
// Everything is good. Submit the form:
theForm.submit();
} else {
// At least one form element is invalid. Loop through all the elements to
// see which one(s) they are:
var theElements = theForm.elements;
for (var i = 0; i < theElements.length; i++) {
var theElement = theElements[i];
// If the form element participates in the HTML5 Validity Framework and
// if it is invalid...
if (theElement.willValidate && !theElement.validity.valid) {
console.warn(theElement.id + " validity details: ");
// ...The object will have a validity object property:
console.log(theElement.validity);
// The element is invalid. Loop through all the validity object's
// properties to see why it is invalid:
for (var constraint in theElement.validity) {
// Check the particular validity constraint for true
if (theElement.validity[constraint]) {
// Update the span element next to the offending form element with the reason:
theElement.nextElementSibling.innerHTML = constraint;
} // End If
} // End For
} // End If
} // End For
} // End If
} // End Function
[Аналогичный вопрос] (http://stackoverflow.com/q/12470622/863110) –
Нет ничего «вы должны делать». Существуют разные возможности для решения поставленной задачи. Имея в своем распоряжении атрибуты проверки, вы можете избежать использования javascript для простой проверки формы. Иногда это нормально. Иногда вам лучше работать с javascript. –