Проверка поля выбора с помощью проверки jquery и выбранных плагинов

Я пытаюсь использовать проверку и выбранный плагин вместе. У меня возникла проблема при проверке полей выбора. Я нашел похожие вопросы Как я могу использовать проверку jQuery с выбранный плагин? и Chosen.js и проверить jquery, но я не мог не могу найти способ импортировать решения в мой код:

<form  class='myform' id='producteditform'>
                    <input type='hidden' value='<? echo $row['id']; ?>' name='pkedit' id='pkedit'>                   
                    <input type='hidden' value='save' name='operation' id='operation'>
                    <p><label for='nameedit'>Product Name</label><em>*</em><input id='nameedit' name='nameedit' value='<? echo $row['pname']?>'/></p>
                    <p><label for='unitedit'>Unit</label><em>*</em><?
                        $query="select * from units";
                        $result=$mysqli->query($query);
                        if($result->num_rows==0)
                        echo "<a href='units.php?operation=insert'>No unit found. Please define a unit first</a>";
                        else{               
                        echo    "<select class='chosen' id='unitedit' name='unitedit'>";        
                            while($row=$result->fetch_assoc())
                              echo  "<option value='".$row['id']."'>".$row['name']."</option>";
                            echo    "</select>";
                        }
                        $mysqli->close();               

                    ?></p>                    
                    <p><a class='button' class='button' id='saveedit'>Save</a>
                    <a class='button' id='canceledit' onclick='f()' >Cancel</a></p>
                    </form>

код jquery

$("#save").click(function () {
        if($("#producteditform").validate({ 
         ignore: [], 
                rules: {
                  nameedit: {
                    required: true,
                    maxlength:100

                  },
                  unitedit:{
                    required: true,
                  }

                }
              }).form()
            )
        {
            // do sth

                })
        }
}

HTML визуализированный вывод

<form class="myform" id="productform" novalidate="novalidate">
                    <input type="hidden" value="insert" name="operation" id="operation">

                    <p><label for="name">Product Name</label><em>*</em><input type="text" name="name" id="name"></p>
                    <p><label for="unit">Unit</label><em>*</em><select class="chosen chzn-done" id="unit" name="unit" style="display: none;"><option value="">please choose..</option><option value="1">kgg</option></select><div id="unit_chzn" class="chzn-container chzn-container-single" style="width: 200px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>please choose..</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 198px; top: 24px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 163px;"></div><ul class="chzn-results"><li id="unit_chzn_o_0" class="active-result result-selected" style="">please choose..</li><li id="unit_chzn_o_1" class="active-result" style="">kgg</li></ul></div></div></p>
                    <p><a class="button" id="save">Save</a>
                    <a class="button" id="cancel" onclick="f()">Cancel</a></p>                  
                    </form>

когда я удаляю class='chosen', все работает нормально, когда нажимается кнопка сохранения, в противном случае я получаю сообщение об ошибке Uncaught Error: Failed to validate, найден элемент без назначенного имени. См. консоль для ссылки на элемент.

jquery jquery-validate jquery-chosen

woryzower 13.02.2013 источник

comment

Вам нужно будет показать немного больше кода и больше объяснить, как это должно работать и что вы хотите. Какая event или функция вызывает ваш оператор if? Что вы хотите сделать, если форма действительна? - Sparky 14.02.2013

comment

Кроме того, покажите свой рендеринг HTML. Ваш сырой PHP бесполезен для ответа на этот вопрос. - Sparky 14.02.2013

Ответы (2)

arrow_upward
3
arrow_downward

Вместо этого попробуйте что-нибудь подобное.

$(document).ready(function() {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        rules: {
            nameedit: {
                required: true,
                maxlength:100
            },
            unitedit:{
                required: true,
            }
        }
    });

    // test for valid form
    $('#save').on('click' function() {
        if($("#producteditform").valid()) {
            // do this on valid form
        } else {
            // do this on invalid form
        }
    });

});

$('#producteditform').validate() инициализирует подключаемый модуль проверки в файле form.

$('#producteditform').valid() программно запускает фактический проверочный тест и возвращает true/false логическое значение.

В качестве альтернативы, поскольку ваш event представляет собой форму click для события submit, вместо этого вы просто используете встроенную функцию обратного вызова submitHandler. (Нет необходимости создавать еще один обработчик click.)

$(document).ready(function() {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        rules: {
            nameedit: {
                required: true,
                maxlength:100
            },
            unitedit:{
                required: true,
            }
        },
        submitHandler: function(form) {
            // do this on valid form
        }
    });

});

Полная документация:

http://docs.jquery.com/Plugins/Validation

Пока вы не покажете свой вывод HTML вместо PHP, вот общий пример того, как проверить элемент select:

http://jsfiddle.net/6Dt7F/

Важно, самое первое или значение по умолчанию option в элементе select должно содержать value="", иначе правило required не сработает.

<select name="field1">
    <option value="">please choose...</option>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

ИЗМЕНИТЬ:

У меня все еще недостаточно кода, чтобы сделать рабочую демонстрацию. Однако, поскольку плагин chosen скрывает фактические элементы формы, вам придется сделать следующее...

1) Нацельтесь на фактический элемент формы, который будет проверяться и передавать данные, а не на визуальный элемент, созданный chosen.

2) Включите jQuery Validate для работы со скрытыми элементами, установив параметр ignore: [].

Попробуй это...

$(document).ready(function () {

    // initialize the plugin on DOM ready
    $("#producteditform").validate({ 
        // all rules and options,
        ignore: [], // <-- option so that hidden elements are validated
        rules: {
            name: {  // <-- name of actual text input
                required: true,
                maxlength: 100
            },
            unit:{  // <-- name of actual select input
                required: true
            }
        },
        submitHandler: function(form) {
            // do this on valid form
        }
    });

});

Sparky 13.02.2013

comment

он все еще не работает. Должен ли я писать валидацию внутри onready? В настоящее время это внутри $(#save).click(function (). - woryzower; 14.02.2013

comment

@woryzower, да, именно в этом проблема. .validate() должен вызываться внутри DOM, чтобы он был правильно инициализирован. Вы не помещаете его в обработчик щелчка, так как опция обратного вызова submitHandler уже обрабатывает щелчок. Это объясняется в первой части моего ответа. - Sparky; 14.02.2013

arrow_upward
2
arrow_downward

Это происходит потому, что Chosen вставляет поле ввода, с помощью которого пользователь может выполнять поиск в раскрывающемся списке.

По какой-то причине в этом поле поиска нет тега имени (отсюда и ошибка):

<input type="text" autocomplete="off" tabindex="7">

У ввода также нет класса или идентификатора, возможно, поэтому ошибка консоли такая расплывчатая. Быстрое решение - дать ему имя:

$(".chzn-search input").attr('name', 'chzn-search');

Ojame 09.07.2013

Проверка поля выбора с помощью проверки jquery и выбранных плагинов

Ответы (2)

Вопросы по теме