Не работает валидация формы на jquery. Не могу понять почему. В js и jquery я новичок. Валидация нужна только на стороне клиента.
Мой код
$(document).ready(function() {
$function() {
var field = new Array('name', 'phone');
$('form').submit(function() {
var error = 0;
$('form').find('input').each(function() {
for (var i = 0; i < field.length; i++) {
if ($(this).attr('name') == field[i]) {
if (!$(this).val()) {
$(this).css('border', 'red 1px solid');
error = 1;
} else {
$(this).css('border', 'none');
}
}
}
})
if (error = 0) {
return true;
} else {
if (error = 1) var err_text = 'Not all fields are filled!';
$('.messenger').html(err_text);
$('.messenger').fadeIn('slow');
return false;
}
})
}
});
<div class="formBlcok">
<h3>Trial Class</h3>
<form action="" method="POST">
<p><input value="" name="name" placeholder="Enter your name" type="text"></p>
<p><input value="" name="phone" placeholder="Enter your phone" type="text"></p>
<select placeholder="blabla" name=" " id=" ">
<option value=" ">Chose your class</option>
</select>
</form>
<div class="messenger"></div>
<button type="submit" name="submit" class="TryI ">Try it</button>
</div>
Кнопка отправки формы и блок с сообщением ошибок нужно поместить в саму форму:
var field = new Array('name', 'phone');
$('form').submit(function() {
var error = 0;
$('form').find('input').each(function() {
for (var i = 0; i < field.length; i++) {
if ($(this).attr('name') == field[i]) {
if (!$(this).val()) {
$(this).css('border', 'red 1px solid');
error = 1;
} else {
$(this).css('border', 'none');
}
}
}
});
if (error = 0) {
return true;
} else {
if (error = 1) var err_text = 'Not all fields are filled!';
$('.messenger').html(err_text);
$('.messenger').fadeIn('slow');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formBlcok">
<h3>Trial Class</h3>
<form action="" method="POST">
<p><input value="" name="name" placeholder="Enter your name" type="text"></p>
<p><input value="" name="phone" placeholder="Enter your phone" type="text"></p>
<select placeholder="blabla" name="sel" id="sel">
<option value=" ">Chose your class</option>
</select>
<div class="messenger "></div>
<button type="submit " name="submit " class="TryIt ">Try it</button>
</form>
</div>
На самом деле, не пойму, для чего вам цикл в цикле, поэтому код можно сократить до такого вида:
$('form').submit(function() {
var error = 0;
$(this).find('input').each(function() {
if (!$(this).val()) {
$(this).css('border', 'red 1px solid');
error = 1;
} else {
$(this).css('border', 'none');
}
});
if (error = 0) {
return true;
} else {
if (error = 1) var err_text = 'Not all fields are filled!';
$('.messenger').html(err_text);
$('.messenger').fadeIn('slow');
return false;
}
});
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всем привет! Есть вот такая секция на сайтеНадо чтобы при изменении размера экрана/браузера(то есть при адаптиве), фон сужался только слева...
Всем приветЕсть модальное окно, которое выезжает сверху
У меня в Unity проекте есть несколько объектов, мне нужно их включать и выключать через стандартный ListPreference, как я могу из C# скрипта запросить...