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, время: 09:18. |