Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   JQuery.Валидация формы (https://javascript.ru/forum/jquery/73908-jquery-validaciya-formy.html)

NastyaNewer 27.05.2018 20:22

JQuery.Валидация формы
 
Добрый вечер всем, ребят снова пишу за помощью. Делаю валидацию формы с помощью QUERY. Валидация не идет, не могу найти ошибку. Помогите найти.

NastyaNewer 27.05.2018 20:25

<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>

NastyaNewer 27.05.2018 20:26

$('#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;
        }
    });
});

NastyaNewer 27.05.2018 20:27

Не могу найти ошибку, помогите пожалуйста. в CSS создала класс .error {
border: 1px solid #f12424;
}

laimas 27.05.2018 20:30

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

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

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

NastyaNewer 27.05.2018 20:51

$(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 27.05.2018 20:52

не могу понять пока как убрать

рони 27.05.2018 21:36

NastyaNewer,
зачем нужно, что ещё, кроме строки 2 пост №6?

NastyaNewer 27.05.2018 21:38

строка 2 не нужна? не поняла? не понимаю как без нее

laimas 27.05.2018 21:47

У вас ошибки и 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, время: 11:23.