Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2018, 20:22
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

JQuery.Валидация формы
Добрый вечер всем, ребят снова пишу за помощью. Делаю валидацию формы с помощью QUERY. Валидация не идет, не могу найти ошибку. Помогите найти.
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2018, 20:25
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2018, 20:26
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

$('#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;
        }
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 27.05.2018, 20:27
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

Не могу найти ошибку, помогите пожалуйста. в CSS создала класс .error {
border: 1px solid #f12424;
}
Ответить с цитированием
  #5 (permalink)  
Старый 27.05.2018, 20:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

$('#submit').click(function validate() {
и обрабатывать событие $("#feedback").submit(function(even) {
отменяя действие по умолчанию - event.preventDefault()

Зачем field? И !$(this).val() в корне не верно - перед проверкой значения обязательно нужно удалять крайние пробелы.

PS. Отмена действия по умолчанию для случая отправления формы Ajax методом.

Последний раз редактировалось laimas, 27.05.2018 в 20:35.
Ответить с цитированием
  #6 (permalink)  
Старый 27.05.2018, 20:51
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

$(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; //если в форме встретились ошибки , не  позволяем отослать данные на сервер.
        };     
    });
});
Ответить с цитированием
  #7 (permalink)  
Старый 27.05.2018, 20:52
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

не могу понять пока как убрать
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2018, 21:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

NastyaNewer,
зачем нужно, что ещё, кроме строки 2 пост №6?
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2018, 21:38
Интересующийся
Отправить личное сообщение для NastyaNewer Посмотреть профиль Найти все сообщения от NastyaNewer
 
Регистрация: 06.04.2018
Сообщений: 28

строка 2 не нужна? не поняла? не понимаю как без нее
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2018, 21:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

У вас ошибки и 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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация веб формы giovanni Events/DOM/Window 3 01.09.2017 15:49
Установка дефолтных значений формы deonis Angular.js 4 03.08.2015 09:06
ajax передача отдельной переменной и формы dmitriy94 AJAX и COMET 11 16.01.2015 23:33
Четыре одинаковые формы на странице с разной версткой varanika jQuery 2 19.10.2014 13:14
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 01:00