Как проверить jquery в поле select2 - все перепробовал - PullRequest
Новая
       1

Как проверить jquery в поле select2 - все перепробовал

0 голосов
/ 15 января 2020

У меня проблема с select2 и Jquery и флажками. Я сделал форму с несколькими разными полями. Предупреждение о проверке отображается над полем Select, когда я добавил флажки проверки. Когда я не добавил этот код:

[флажки подтверждают код] [1]

[! [Введите описание изображения здесь] [1]] [1]

предупреждение отображается в поле select2, но предупреждения о флажках отображаются неправильно: [Неправильное предупреждение о флажках] [3] Я не знаю почему, может кто-нибудь взглянуть на код и исправить меня?

[! [Введите описание изображения здесь] [2]] [2]

[form printscreen] [2]

[! [Введите описание изображения здесь] [3 ]] [3]

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Спасибо за ваш ответ. Так что я делаю это немного по-другому. Код проверки теперь: 

                $("#signupForm").validate({
                    debug: false,
                    errorClass: "has-error",
                    errorElement: "span",
                   rules: {

                        miejscowosc: {
                            required: true,
                            lettersonly: true,
                        },
                                               wojewodztwo: {
                            required: true,
                        },


                    errorContainer: $('#errorContainer'),
                    // enabling this will display error labels in the container error
                    // errorLabelContainer: $('#errorContainer ul'),
                    // wrapper: 'li',

                    highlight: function(element, errorClass, validClass) {
                        $(element).addClass(errorClass); //.removeClass(errorClass);
                        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).removeClass(errorClass); //.addClass(validClass);
                        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                    },
                    errorPlacement: function(error, element) {
                        if (element.parent('.input-group').length) {
                            error.insertAfter(element.parent());
                        } else if (element.hasClass('select2')) {
                            error.insertAfter(element.next('span'));
                        } 
                        else if (element.attr("name") == "zgoda") {
                            error.insertAfter("#checkboxError"); 
                            } 

                            else if (element.attr("name") == "zgoda1") {
                            error.insertAfter("#checkboxError1"); 
                            } 
                            else if (element.attr("name") == "zgoda2") {
                            error.insertAfter("#checkboxError2"); 
                            } 

                        else {
                            error.insertAfter(element);
                        }
                    },



                });

, и теперь предупреждающее сообщение находится под «select2», поэтому все в порядке.

Код «Select2» - 

var Formularz = function () {
                    return {
                        //main function to initiate the module
                        init: function () {
                            function format(state) {
                                if (!state.id) return state.text; // optgroup
                                return state.id.toLowerCase() + state.text;
                            }

                            $("#Select_Wojewodztwo").select2({
                                placeholder: "Wybierz Wojewodztwo",
                                allowClear: true,
                                formatResult: format,
                                width: '100%',  
                                formatSelection: format,
                                escapeMarkup: function (m) {
                                    return m;
                                }
                            });                                     
                        }
                    };
                }();

                jQuery(document).ready(function() {
                    Formularz.init();
                });

второй у меня проблема has-error не выводится в поле select2 и не выделяет его красным.

введите описание изображения здесь

код в форме: 

<div class="col-sm-12 col-md-4 col-lg-4 form-group">                                            
                                        <div class="col-lg-12 form-label">
                                            Województwo
                                        </div>  
                                        <div class="col-lg-12 ">
                                            <select name="wojewodztwo" id="Select_Wojewodztwo" class="select2 form-control selection">
                                                <option value=""></option>
                                                <option value="Dolnoslaskie">Dolnośląskie</option>
                                                <option value="Kujawsko-pomorskie">Kujawsko-pomorskie</option>
                                                <option value="Lubelskie">Lubelskie</option>
                                                <option value="Lubuskie">Lubuskie</option>
                                                <option value="Lodzkie">Łódzkie</option>
                                                <option value="Malopolskie">Małopolskie</option>
                                                <option value="Mazowieckie">Mazowieckie</option>
                                                <option value="Opolskie">Opolskie</option>
                                                <option value="Podkarpackie">Podkarpackie</option>
                                                <option value="Podlaskie">Podlaskie</option>
                                                <option value="Pomorskie">Pomorskie</option>
                                                <option value="Slaskie">Śląskie</option>
                                                <option value="Swietokrzyskie">Świętokrzyskie</option>
                                                <option value="Warminsko-mazurskie">Warmińsko-mazurskie</option>
                                                <option value="Wielkopolskie">Wielkopolskie</option>
                                                <option value="Zachodniopomorskie">Zachodniopomorskie</option>
                                            </select>                                                                       
                                        </div>      
                                    </div>

что вы думаете об этом. Что тут не так?

0 голосов
/ 15 января 2020

Вы можете попробовать это: 

<form id="myForm" method="post" name="myForm" action="">
    <div class="checkbox-container">
        <label for="terms">terms : </label>
        <input type="checkbox" name="terms" id="terms">
        <div id="errorToShow"></div>
    </div>
    <button type="submit">save</button>
</form>

Сценарий: 

       $("#myForm").validate({
            rules: {
                terms: "required"
            },
            messages: {
                terms: "select the checkbox"
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "terms") {
                    error.appendTo("#errorToShow");
                } else {
                    error.insertAfter(element);
                }
            }
        });

Поместите идентификатор id = "errorToShow", где вы хотите показать ошибку. Это работает для меня. Сообщение об ошибке будет отображаться в 

<div id="errorToShow"></div>
...