Я создал форму, где проверяются поля: заголовок, имя, возраст, адрес электронной почты, описание и текст. Есть еще поля, которые вы можете добавить. Они также должны быть проверены, а именно количество символов. Как сделать проверку через al oop? Для всех полей и так, чтобы рядом с каждым незаполненным полем отображалась ошибка. Также необходимо учитывать, что пользователь может удалить все поля одной кнопкой и сбросить счетчик полей, который добавляется после каждого добавленного поля. Вот код
<html>
<head>
<title>Dynamically add input field using jquery</title>
<style>
.container1 input[type=text] {
padding:5px 0px;
margin:5px 5px 5px 0px;
}
.add_form_field
{
background-color: #1c97f3;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border:1px solid #186dad;
}
input{
border: 1px solid #1c97f3;
width: 260px;
height: 40px;
margin-bottom:14px;
}
.delete{
background-color: #fd1200;
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var error_desc = false;
var error_text = false;
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="driver__list"><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$('#clear').click(function(){
x = 0;
$("input").closest('.container1').find('.driver__list').html('');
});
$('#age').keypress('', function () {
check_char(/^\d+$/,"#age","#age_error_message","Only numbers");
});
//https://stackoverflow.com/questions/6646613/please-explain-this-e-mail-validation-regular-expression
$('#email').keypress('', function () {
check_char(/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i,"#email","#email_error_message","Invalid email");
});
$('#name').keypress('', function () {
check_char(/^[a-zA-Z]*$/,"#name","#name_error_message","Text at least 7 characters");
});
$('#title').keypress('', function () {
check_field("#title","#title_error_message",7,"Text at least 7 characters");
});
$('#description').keypress('', function () {
check_field("#description","#desc_error_message",200,"Text at least 200 characters");
});
$('#text').keypress('', function () {
//check_text();
check_field("#text","#text_error_message",200,"Text at least 200 characters");
});
function check_char(pattern,id,err,mess)
{
var text = $(id).val();
if (pattern.test(text) && text !== '') {
$(err).hide();
$(id).css("border-bottom","2px solid #34F458");
} else {
$(err).html(mess);
$(err).show();
$(id).css("border-bottom","2px solid #F90A0A");
}
}
function check_field(id,err,len,mess)
{
var text = $(id).val();
if (text.length>len) {
$(err).hide();
$(id).css("border-bottom","2px solid #34F458");
}else
{
$(err).html(mess);
$(err).show();
$(id).css("border-bottom","2px solid #F90A0A");
}
}
});
</script>
</head>
<body>
<span id="mess"></span>
<div id="content">
<form name="add_name" id="add_name">
Title:<br>
<input type="text" id="title" name="title"><br>
<span class="error_form" id="title_error_message"></span>
Name:<br>
<input type="text" id="name" name="name"><br>
<span class="error_form" id="name_error_message"></span>
Age:<br>
<input type="text" id="age" name="age"><br>
<span class="error_form" id="age_error_message"></span>
Email:<br>
<input type="text" id="email" name="email"><br>
<span class="error_form" id="email_error_message"></span>
<div class="container1">
<button class="add_form_field">Add New Field <span style="font-size:16px; font-weight:bold;">+ </span></button><button id="clear">Clear</button>
<div class="driver__list"><input type="text" name="mytext[]"></div>
</div>
Description:<br>
<textarea cols="50px" id="description" rows="15px" name="description"></textarea><br>
<span class="error_form" id="desc_error_message"></span>
Text:<br>
<textarea cols="50px" id="text" rows="15px" name="text"></textarea><br>
<span class="error_form" id="text_error_message"></span><br>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</body>
</html>