Валидация форм (проверка ввода данных) JavaScript

Проверка заполнения формы

JavaScript


function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Необходимо ввести имя");
return false;
}
}


html


<form name="myForm" action="//codemg.ru/html5/js/validation_form.php" onsubmit="return validateForm()" method="post">
Имя: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>


Пример

Проверка ввода чисел

JavaScript


function myFunction() {
var x;
var text = "Все в порядке";

x = document.getElementById("numb").value;

if (isNaN(x) || x < 1 || x > 10) {
text = "Ввод не верен";
}
document.getElementById("demo").innerHTML = text;
}


html


<p>Введите число от 1 до 10</p>
<input type="text" id="numb" required>
<button type="button" onclick="myFunction()">Ввод</button>
<p id="demo"></p>


Пример

Введите число от 1 до 10

Необычный способ проверки валидности email.

JavaScript


function myFunction() {
const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("Введите корректный email");
} else {
email.setCustomValidity("");
}
});


html


<form>
<label for="mail">Email</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>


Пример