Валидация форм без плагина Validate
Есть задание - сделать валидацию форм (не менее двух), должно быть две кнопки - одна для обработки первой формы, вторая - для другой. Для начала решила попробовать сделать хотя бы для одной формы. Но, есть проблемы.
Если какое-либо из полей не заполнено или же не удовлетворяет условию - они должны подсветиться, и форма не отправится, но сейчас при нажатии на кнопку отправки сразу же происходит отправка формы, функция проверки не срабатывает и форма сразу же отправляется на сервер: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="">
<div class="form-group has-feedback nameBlock">
<label class="control-label" for="name">Ваше имя</label>
<input type="text" class="form-control" id="name" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group has-feedback emailBlock">
<label class="control-label" for="email">Ваш email</label>
<input type="email" class="form-control" id="email" aria-describedby="inputSuccess2Status">
</div>
<button class="btn btn-success btn-lg" type="submit">Отправить</button>
</form>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
var validName = false;
var validEmail = false;
var Send = function() {
Send.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
if (name == "") {
$("#name").parent().removeClass("has-success").addClass("has-error");
$(".nameBlock").append("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
$(".nameBlock .glyphicon-ok").remove();
validName = false;
} else {
$("#name").parent().removeClass("has-error").addClass("has-success");
$(".nameBlock").append("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
$(".nameBlock .glyphicon-remove").remove();
validName = true;
}
if (email == "") {
$("#email").parent().removeClass("has-success").addClass("has-error");
$(".emailBlock").append("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
$(".emailBlock .glyphicon-ok").remove();
validEmail = false;
} else {
$("#email").parent().removeClass("has-error").addClass("has-success");
$(".emailBlock").append("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
$(".emailBlock .glyphicon-remove").remove();
validEmail = true;
}
if (validName == true && validEmail == true) {
alert("ОК!")
$("form").unbind('submit').submit();
}
}
});
$("form").submit(function(Send) {
Send();
});
</script>
</body>
</html>
Какая здесь ошибка и почему функция не срабатывает? Можно ли в одной функции проверять сразу несколько форм (обязательное условие задания, обе формы должна обрабатывать одна функция!)? |
Espidsdfeer,
строку 73 вниз перенесите в 78, иначе Send не видно в строке 75. |
Цитата:
Цитата:
|
Главное условие - чтобы поле не было пустым.
Есть вариант рабочего кода, но каждую форму обрабатывает отдельная функция: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>Form 1</h2>
<form id="first_form" method="post" action="">
<div>
<label>Name</label>
<input type="text" class = "first_name" name="first_name"></input>
</div>
<div>
<label>Last Name</label>
<input type="text" class = "last_name" name="last_name"></input>
</div>
<div>
<label>E-Mail</label>
<input type="text" class = "email" name="email"></input>
</div>
<div>
<label>Password</label>
<input type="password" class = "password" name="password"></input>
</div>
<div>
<input type="submit" value="Submit Form 1">
</div>
</form>
<h2>Form 2</h2>
<form id="form2" method="post" action="">
<div>
<label>Age</label>
<input type="text" class = "age" name="age"></input>
</div>
<div>
<label>Film Genre</label>
<input type="text" class = "genre" name="genre"></input>
</div>
<div>
<label>Music</label>
<input type="text" class = "music" name="music"></input>
</div>
<div>
<label>Another field</label>
<input type="password" class = "field" name="field"></input>
</div>
<div>
<input type="submit" value="Submit Form 2" onclick="return submit">
</div>
</form>
</body>
</html>
<style>
form label{
display: inline-block;
width: 100px;
}
form div{
margin-bottom: 10px;
}
.error{
color: red;
margin-left: 5px;
}
.success{
color:green;
margin-left: 5px;
}
label.error{
display:inline;
}
</style>
<script>
$('#first_form').submit(function(CheckForm1){
CheckForm1.preventDefault();
var first_name = $('.first_name').val();
var last_name = $('.last_name').val();
var email = $('.email').val();
var password = $('.password').val();
$(".error").remove();
$(".success").remove();
if (first_name.length < 1){
$('.first_name').css('border-color', 'red');
$('.first_name').after('<span class="error">Поле не заполнено</span>');
}
if (last_name.length < 1){
$('.last_name').css('border-color', 'red');
$('.last_name').after('<span class="error">Поле не заполнено</span>');
}
if (email.length < 1){
$('.email').css('border-color', 'red');
$('.email').after('<span class="error">Поле не заполнено</span>');
}
if (password.length < 1){
$('.password').css('border-color', 'red');
$('.password').after('<span class="error">Поле не заполнено</span>');
}
if (first_name.length!=0){
$('.first_name').css('border-color', 'green');
$('.first_name').after('<span class="success">Поле заполнено</span>');
}
if (last_name.length!=0){
$('.last_name').css('border-color', 'green');
$('.last_name').after('<span class="success">Поле заполнено</span>');
}
if (email.length!=0){
$('.email').css('border-color', 'green');
$('.email').after('<span class="success">Поле заполнено</span>');
}
if (password.length!=0){
$('.password').css('border-color', 'green');
$('.password').after('<span class="success">Поле заполнено</span>');
}
if (first_name.length < 1 || last_name.length < 1 || email.length < 1 || password.length < 1){
alert("Не все поля заполнены! Форма не отправлена");
return false;
}
else{
return true;
}
});
$('#form2').submit(function(CheckForm2){
$(".error").remove();
$(".success").remove();
CheckForm2.preventDefault();
var age = $('.age').val();
var genre = $('.genre').val();
var music = $('.music').val();
var field = $('.field').val();
if (age.length < 1){
$('.age').css('border-color', 'red');
$('.age').after('<span class="error">Поле не заполнено</span>');
}
if (genre.length < 1){
$('.genre').css('border-color', 'red');
$('.genre').after('<span class="error">Поле не заполнено</span>');
}
if (music.length < 1){
$('.music').css('border-color', 'red');
$('.music').after('<span class="error">Поле не заполнено</span>');
}
if (field.length < 1){
$('.field').css('border-color', 'red');
$('.field').after('<span class="error">Поле не заполнено</span>');
}
if (age.length!=0){
$('.age').css('border-color', 'green');
$('.age').after('<span class="success">Поле заполнено</span>');
}
if (genre.length!=0){
$('.genre').css('border-color', 'green');
$('.genre').after('<span class="success">Поле заполнено</span>');
}
if (music.length!=0){
$('.music').css('border-color', 'green');
$('.music').after('<span class="success">Поле заполнено</span>');
}
if (field.length!=0){
$('.field').css('border-color', 'green');
$('.field').after('<span class="success">Поле заполнено</span>');
}
if (music.length < 1 || genre.length < 1 || field.length < 1 || age.length < 1){
alert("Не все поля заполнены! Форма не отправлена");
return false;
}
else{
alert("Успешная отправка формы!");
return true;
}
});
</script>
Очень нужно сделать так, чтобы вся обработка шла через одну функцию, и одну функцию вызывать для каждой формы. Подскажите, пожалуйста, как это правильно сделать... Только учусь |
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
form label{
display: inline-block;
width: 100px;
}
form div{
margin-bottom: 10px;
}
.error{
color: red;
margin-left: 5px;
}
.success{
color:green;
margin-left: 5px;
}
label.error{
display:inline;
}
</style>
</head>
<body>
<h2>Form 1</h2>
<form id="first_form" method="post" action="" novalidate>
<div>
<label>Name</label>
<input type="text" class = "first_name" name="first_name" required></input>
</div>
<div>
<label>Last Name</label>
<input type="text" class = "last_name" name="last_name" required></input>
</div>
<div>
<label>E-Mail</label>
<input type="text" class = "email" name="email" required></input>
</div>
<div>
<label>Password</label>
<input type="password" class = "password" name="password" required></input>
</div>
<div>
<input type="submit" value="Submit Form 1">
</div>
</form>
<h2>Form 2</h2>
<form id="form2" method="post" action="" novalidate>
<div>
<label>Age</label>
<input type="text" class = "age" name="age" required></input>
</div>
<div>
<label>Film Genre</label>
<input type="text" class = "genre" name="genre" required></input>
</div>
<div>
<label>Music</label>
<input type="text" class = "music" name="music" required></input>
</div>
<div>
<label>Another field</label>
<input type="password" class = "field" name="field" required></input>
</div>
<div>
<input type="submit" value="Submit Form 2" onclick="return submit">
</div>
</form>
<script>
function CheckForm (ev) {
const valid = ev.target.querySelectorAll('input:not([type=submit]):valid')
valid.forEach (inp => {
inp.style.borderColor = 'green';
inp.insertAdjacentHTML('afterend', '<span class="success">Поле заполнено</span>')
})
const invalid = ev.target.querySelectorAll('input:invalid')
if (!invalid.length) {
setTimeout(() =>alert('Успешная отправка формы!'),0)
return
}
invalid.forEach (inp => {
inp.style.borderColor = 'red';
inp.insertAdjacentHTML('afterend', '<span class="error">Поле не заполнено</span>')
})
setTimeout(() =>alert("Не все поля заполнены! Форма не отправлена"), 0)
ev.preventDefault()
}
document.querySelector('#first_form').addEventListener('submit',CheckForm)
document.querySelector('#form2').addEventListener('submit',CheckForm)
</script>
</body>
</html>
|
А как это будет выглядеть с использованием jQuery, не можете подсказать?:)
Я начал изменять, но не могу корректно чистый JS отредачить на jquery, с моими недоправками проверяет но нажатию на Submit Form 1 обе формы... |
| Часовой пояс GMT +3, время: 11:13. |