Javascript 选择.js并验证jquery

我正在使用validate.jquery.js：工作正常。 但是当我添加selected.js时，select下拉菜单上的验证不再有效

这是我正在使用的JS

这是我的选择表格：

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

VTT
Autre-type de vé；瞧

---

不知道为什么selected.js会禁用验证，知道吗？

您可以通过添加类“chzn done”来解决此问题，该类不会将属性“ignore”添加到“validate.settings”中：

HTML:

---

我只想补充一点，对于错误放置，它会将元素直接附加到hidden旁边，因此您可能希望通过在validate函数上使用以下代码作为选项参数来更改放置

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

    }

---

这不仅可以解决无法查看验证的问题，还可以将标准的“输入验证错误”类应用于selected.js样式的select

有两种情况需要在提交表单和选择更改时应用它。请参阅下面代码的三个部分

第一个设置表单验证以验证隐藏元素

第二个在提交时检查所选的验证

第三个检查所选的变更验证

设置表单验证以显示隐藏：

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

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

$(".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");
    }
});

检查表单提交：

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

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

$(".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");
    }
});

检查选择更改：

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

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

$(".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");
    }
});

---

提交表单后，还存在验证所选选择菜单的问题。如果菜单上有验证错误，则将菜单更改为有效，验证错误不会消失。表单仍然可以提交，但由于显示了验证错误，因此不太明显

下面是一个使用

invalidHandler

和

valid（）

修复它的示例

---

我发现了一个可能的答案，如果您有相同的问题，它会有所帮助：

确保验证器不会忽略：隐藏元素。原始的``在被选中时会隐藏，并将其下拉列表应用于DOM。

我认为stackoverflow更喜欢将您自己找到的解决方案作为答案发布，而不是接受它，这样问题就会在搜索页面中显示为已回答和接受。我尝试过，但由于我是新用户，我还不受信任，不幸的是，我无法这样做：（为什么不利用插件内置的回调函数/选项呢？第一个函数可以是

onsubmit

回调选项的一部分，第二个函数可以是

highlight

和

unhighlight

回调选项的一部分。请看：你能检查一下它现在是否工作，但它仍然有一些问题。我会我会在我的问题上发表同样的帖子。谢谢你的检查！