Главное условие - чтобы поле не было пустым.
Есть вариант рабочего кода, но каждую форму обрабатывает отдельная функция:
<!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>
Очень нужно сделать так, чтобы вся обработка шла через одну функцию, и одну функцию вызывать для каждой формы.
Подскажите, пожалуйста, как это правильно сделать... Только учусь