JQuery.Валидация формы
Добрый вечер всем, ребят снова пишу за помощью. Делаю валидацию формы с помощью QUERY. Валидация не идет, не могу найти ошибку. Помогите найти.
|
<div id="popup_contact" class="feedback popup_block">
<div class="form">
<form name="contact_form" action="#" method="post" id="feedback"></form>
<h2 class="form_title">Добавить фильм</h2>
<div class="input_list">
<p class="picture_title"><label for="picture">URL картинки</label><span class="star">*</span></p>
<p><input type="text" id="picture" name="picture" class="field_picture form_control" required placeholder=""></p>
<p class="name_title"><label for="name_films">Название фильма</label><span class="star">*</span></p>
<p><input type="text" id="name_films" name="films" required placeholder="" class="field_films form_control"></p>
<p class="description_film"><label class="description" for="description">Описание фильма</label><span class="star">*</span></p>
<p><textarea name="description" class="description_field form_control" required placeholder="" id="description" rows="10"></textarea></p>
<p><label for="submit" class="button_send"></label></p>
<label><input type="submit" id="submit" value="Отправить" class="button_message disabled"></label>
<label for="popup_contact" class="close_block" id="close"></label>
</div>
</form>
</div>
</div>
<div class="shadow"></div>
|
$('#submit').click(function validate() {
var field = new Array("picture", "name_films", "description");
$("#feedback").submit(function() {
var error=0;
$("#feedback").find(":input").each(function() {
for(var i=0;i<field.length;i++){
if($(this).attr("name")==field[i]){
if(!$(this).val()){
$(this).addClass('error');
error=1;
}
else{
$(this).removeClass('error');
}
}
}
})
if(error==0){
return true;
}else{
return false;
}
});
});
|
Не могу найти ошибку, помогите пожалуйста. в CSS создала класс .error {
border: 1px solid #f12424; } |
отменяя действие по умолчанию - event.preventDefault() Зачем field? И !$(this).val() в корне не верно - перед проверкой значения обязательно нужно удалять крайние пробелы. PS. Отмена действия по умолчанию для случая отправления формы Ajax методом. |
$(function() {
$("#feedback").validate();
var field = new Array("picture", "name_films", "description");//поля обязательные
$("#feedback").submit(function() {// обрабатываем отправку формы
var error = 0; // индекс ошибки
$("#feedback").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', 'gray 1px solid');// устанавливаем рамку обычного цвета
};
};
};
});
if( error == 0 ) { // если ошибок нет то отправляем данные
return true;
}
else {
if( error == 1 )
return false; //если в форме встретились ошибки , не позволяем отослать данные на сервер.
};
});
});
|
не могу понять пока как убрать
|
NastyaNewer,
зачем нужно, что ещё, кроме строки 2 пост №6? |
строка 2 не нужна? не поняла? не понимаю как без нее
|
У вас ошибки и html коде. Поля формы могут располагаться вне тела формы, то есть ее тегов, но в этом случае они должны быть связаны с ней посредством атрибута form="идентификатор формы". У вас этого нет, форма пустая, так как лишний закрывающий тег </form> (строка 3).
$(function() {
$("#feedback").submit(function(e) {// обрабатываем отправку формы
var error = true;
$(this.elements).filter('[required]').each(function() {// проверяем обязательные поля
var v = $.trim(this.value);
this.style.border = !v ? (error = false, '1px solid #F00') : ''
});
return error;
});
});
Стили формы можно определить через CSS - :valid и :invalid. Проверку посредством JS только для браузеров не поддерживающих required. |
| Часовой пояс GMT +3, время: 05:11. |