Вопрос по jquery, javascript, validation, jquery-chosen – Chosen.js и проверить JQuery

13

Я использую validate.jquery.js: работает отлично. Но когда я добавляю selected.js, проверка выбранных выпадающих списков больше не работает.

Вот JS, который я используюhttp://pastebin.com/S9AaxdEN

И вот моя форма выбора:

<code><select name="category" id="category" placeholder="" class="{validate:{required:true}}">
<option value=""><?php echo lang('category_choice'); ?></option>
<option value="vtt">VTT</option>
<option value="autre">Autre type de v&eacute;lo</option>
</select>
</code>

Не знаете, почему selected.js отключили проверку, вы понимаете?

Я пытался, но, поскольку я новый пользователь, мне еще не доверяют и, к сожалению, я не могу этого сделать :( PhilMarc
Возможный ответ, который я нашел, может помочь, если у вас возникла такая же проблема:Make sure the validator doesn't ignore :hidden elements. The original `` is hidden when chosen applies its drop-down to the DOM. PhilMarc
Я думаю, что stackoverflow предпочитает, если вы публикуете решение, которое вы нашли самостоятельно, в качестве ответа, а затем принимаете его, чтобы вопрос отображался как ответ и принят на странице поиска. Peter Lyons

Ваш Ответ

4   ответа
5

что для размещения ошибок, он добавит элемент рядом со скрытым, поэтому вы можете изменить размещение, используя следующий код в вашей функции проверки в качестве аргумента опции

errorPlacement: function(error,element) {
        if (element.is(":hidden")) {
            //console.log(element.next().parent());
            element.next().parent().append(error);
        }
        else {
            error.insertAfter(element);
        }

    }
18

chzn-done & quot; это не принимает свойство "игнорировать" на "validate.settings":

var settings = $.data($('#myform')[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';

пример

HTML:

<form method="post" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <div>
            <label>datos</label>
            <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;">
                <option></option>
                <option value="1">uno</option>
                <option value="2">dos</option>
            </select>
        </div>
        <div>
            <label for="phone">Phone</label>
            <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" />
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" class="{required:true,email:true}">
        </div>

        <div class="error"></div>
        <div>
            <input type="submit" value="enviar datos"/>
        </div>
    </fieldset>
</form>

JS:

$(function() {

    var $form = $("#form1");

    $(".chzn-select").chosen({no_results_text: "No results matched"});
    $form.validate({
        errorLabelContainer: $("#form1 div.error"),
        wrapper: 'div',
    });

    var settings = $.data($form[0], 'validator').settings;
    settings.ignore += ':not(.chzn-done)';

    $('form').each(function(i, el){

        var settings = $.data(this, 'validator').settings;
        settings.ignore += ':not(.chzn-done)';

    });

});
да, он работает на данный момент, но у него все еще есть некоторые проблемы. Я бы отправил то же самое на мой вопрос. Спасибо за проверку!
привет @ Джозеф, я думаю, у тебя уже есть ответ, верно?
Вы не могли бы проверитьstackoverflow.com/questions/20950610/…
0

after Форма была отправлена. Если в меню есть ошибка проверки, измените меню на допустимое, ошибка проверки не исчезнет. Форма все еще может быть отправлена, но она не очевидна, так как обнаружена ошибка проверки.

Вот один пример, чтобы исправить это, используяinvalidHandler а такжеvalid().

// We'll use this flag so we don't have to validate fields before
// the form has been submitted.
var validatingForm = false;

// This line before validate() is called allows
// chosen menus to be validated
$.validator.setDefaults({ ignore: ":hidden:not(select)" });

$("#yourForm").validate({
    invalidHandler: function() {
        // Now we can validate the fields onChange
        validateForm = true;
    },
        rules: {
            // Probably your validation rules here
        }
    });

//  Now set an onChange event for the chosen menu
$("yourChosenMenu").change(function(){

    // Check that we've tried to submit the form
    if(validateForm) {
        // We tried to submit the form, re-validate on change
        $("yourChosenMenu").valid();
    }
});
3

но также и применение стандарта"input-validation-error" класс selected.js в стиле select.

В двух случаях его необходимо применять как при отправке формы, так и при выбранном изменении. Смотрите три раздела кода ниже.

The first sets the form validation to validate hidden elements. The second checks the chosen validation on submit. The third checks the chosen validation on a change.

Sets up the form validation to show hidden:

var validator = $("#FormID").data('validator');
validator.settings.ignore = ":hidden:not(select)";

Checks on form submit:

$('#FormID').on('submit', function () {
    var ChosenDropDowns = $('.chzn-done');
    ChosenDropDowns.each(function (index) {
        var ID = $(this).attr("id");
        if (!$(this).valid()) 
        {
            $("#" + ID + "_chzn a").addClass("input-validation-error");
        }
        else 
        {
            $("#" + ID + "_chzn a").removeClass("input-validation-error");
        }
    });
});

Checks on select change:

$(".chzn-select").chosen().change(function () {
    var ID = $(this).attr("id");
    if (!$(this).valid()) {
        $("#" + ID + "_chzn a").addClass("input-validation-error");
    }
    else {
        $("#" + ID + "_chzn a").removeClass("input-validation-error");
    }
});
Почему бы не воспользоваться преимуществами встроенной функции / опций обратного вызова плагина? Первая функция может быть частьюonsubmit опция обратного вызова, а вторая может быть частьюhighlight а такжеunhighlight варианты обратного вызова. Увидеть:docs.jquery.com/Plugins/Validation/validate#toptions

Похожие вопросы