Проверка формы
Пытаюсь сделать проверку формы с помощью jquery
как сделать проверку при наведении на поле разобрался, через blur застрял на том как сделать проверку: когда нажимаем на кнопку отправки формы, происходила проверка незаполненных полей и если поля не заполнены форма не отправлялась. подскажите в какую сторону копать и если можно пример какойнибудь |
housewm,
:-? ... вариант валидации формы на jquery ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#foo').submit(function () {
var $input = $('input:text', this),
error = '';
$input.each(function (indx, element) {
$val = element.value;
$(element).css({
background: $val ? '' : (error += 'незаполнено ' + element.placeholder + '\n', '#FF9494')
})
});
if (error) {
alert(error);
return false
}
return true;
});
})
</script>
</head>
<body>
<form id="foo" action="\">
<input type="hidden" name="discount" value="35%">
<input type="text" name="name" placeholder="Имя">
<input type="text" name="email" placeholder="Email">
<input type="text" name="phone" placeholder="Телефон">
<input type="submit" value="Заказать звонок">
</form>
</body>
</html>
|
Ага сделал через submit, но сейчас встал другой вопрос как связать две проверки. Сейчас получается если ввести в поле не email то проверка с blur не пойдет но так как поле уже не пустое то проверка с submit пройдет.
Как их вязать друг с другом? сделать переменную внутри blur и проверять потом ее в submit?
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').submit(function () {
if($('#email').val() == '') {
$('#email').css({'border' : '1px solid #ff0000'});
$('#valid').text('Поле email не должно быть пустым');
}
else{
$('#valid').text('Все верно');
}
});
$('#email').blur(function() {
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if(pattern.test($(this).val())){
$(this).css({'border' : '1px solid #569b44'});
$('#valid').text('Верно');
} else {
$(this).css({'border' : '1px solid #ff0000'});
$('#valid').text('Не верно');
}
});
});
</script>
</head>
<body>
<form id="foo" action="/">
<input id="email" type="text"/>
<div id="valid"></div>
<input type="submit" value="button"/>
</form>
</body>
</html>
|
housewm,
а зачем вам blur? проверяйте всё в submit |
хочется и то и то реализовать
blur для того чтобы на лету проверялась форма |
Чтобы связать две проверки надо развязать функцию проверки на 2 части. Первая часть будет проверять поданное значение и возвращать либо санированное, либо ексешпн, вторая часть навешивается на поля и через потерю фокуса вызывает первую часть. Которую вы сможете зациклить и в процессе проверки всей формы перед отгрузкой.
Что требуется на тот случай, если поля заполнены автоматически, или вставкой. Впрочем, если на js можно генерить этот blur, то и генерите его в том самом цикле. |
А, вот оно что:
Цитата:
Ну то есть все что вам надо, в смысле вашим клиентам, это номер телефона. Все остальные поля на усмотрение. Но вы ж тогда зачем нужны как программист... |
| Часовой пояс GMT +3, время: 22:43. |