如何通过“选择”插件使用 jQuery 验证？

Posted 2023-05-07

【中文标题】如何通过“选择”插件使用 jQuery 验证？

【英文标题】：How can I use jQuery validation with the "chosen" plugin?

【发布时间】：2012-06-29 05:53:09

【问题描述】：

我有一些使用chosen plugin 的<select> 输入，我想在客户端验证为“必需”。由于“选择”隐藏了实际的选择元素并创建了一个带有 div 和 span 的小部件，因此原生 html5 验证似乎无法正常工作。表单不会提交（这很好），但没有显示错误消息，因此用户不知道出了什么问题（这不好）。

我已经求助于 jQuery 验证插件（我最终还是打算使用它），但到目前为止还没有任何运气。这是我的test case：

<form>
    <label>Name: <input name="test1" required></label>
    <label>Favorite Color:
        <select name="test2" required>
            <option value=""></option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </select>
    </label>
    <input type="submit">
</form>

$(document).ready(function()
    $('select').chosen();
    $('form').validate();
);

这是让select 以空值通过，而不验证或显示错误消息。当我注释掉 chosen() 行时，它工作正常。

如何使用 jQuery 验证插件验证 chosen() 输入，并显示无效输入的错误消息？

【问题讨论】：

检查this plugin。不是真正的解决方案，但您可能想尝试一下。

@elclanrs：谢谢，但我现在想坚持使用事实上的 jQuery 验证库，尤其是在项目的这个阶段（试图结束）。也许在未来的项目中。

这篇文章解决了我的问题：***.com/questions/10387553/…简单优雅。

【参考方案1】：

jQuery validate 忽略了隐藏元素，由于 Chosen 插件在 select 中添加了visibility:hidden 属性，试试：

$.validator.setDefaults( ignore: ":hidden:not(select)" ) //for all select

或

$.validator.setDefaults( ignore: ":hidden:not(.chosen-select)" ) //for all select having class .chosen-select

在validate() 函数之前添加这一行。对我来说效果很好。

【讨论】：

这对我来说已经足够了。谢谢。

你把这行放在哪里了？它似乎对我不起作用：/

就在 JQuery validate() 函数上方。

为我工作！绝对是最简单的解决方案。

因为我选择的所有选择都有 .chosen-select 类，我发现使用 $.validator.setDefaults( ignore: ":hidden:not(.chosen-select)" ); 更好。否则这意味着所有隐藏的选择都会被验证。

【参考方案2】：

jQuery 验证不会选择隐藏的元素，但您可以强制它验证单个元素。有点破解，但以下将起作用：

$('form').on('submit', function(e) 
    if(!$('[name="test2"]').valid()) 
        e.preventDefault();
    
);  

要仅选择“选择”元素，您可以使用$('.chzn-done')

【讨论】：

看来e.preventDefault() 甚至没有必要，只需调用$("element").valid()。我使用了this code，它似乎工作得很好：$('form').on('submit', function() $('.chzn-done').valid(););。感谢您的信息。

.chzn-done 自 Chosen 1.0 起不再添加到“选择”元素中

【参考方案3】：

在我的。

我的表单有类“验证” 并且每个输入元素都有“必需”类 html代码：

<form id="ProdukProdukTambahForm" class="validate form-horizontal" accept-charset="utf-8" method="post" enctype="multipart/form-data" action="/produk-review/produk/produkTambah" novalidate="novalidate">
     <div class="control-group">
        <label class="control-label" for="sku">SKU</label>
        <div class="controls">
           <input id="sku" class="required span6" type="text" name="sku">
        </div>
     </div>
     <div class="control-group">
        <label for="supplier" class="control-label">Supplier</label>
        <div class="controls">
            <select name="supplier" id="supplier" class='cho span6 required:true '>                                           
                <option value=''>-- PILIH --</option>
                <?php
                foreach ($result as $res)
                    
                    echo '<option value="'.$res['tbl_suppliers']['kode_supplier'].'">'.$res['tbl_suppliers']['nama_supplier'].'</option>';
                    
                ?>
            </select>
         </div>
      </div>
</form>

和 javascript 代码用于选择 jquery 验证

$(document).ready(function() 
    // - validation
    if($('.validate').length > 0)
        $('.validate').validate(
            errorPlacement:function(error, element)
                    element.parents('.controls').append(error);
            ,
            highlight: function(label) 
                $(label).closest('.control-group').removeClass('error success').addClass('error');
            ,
            success: function(label) 
                label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
            ,
            //validate choosen select (select with search)
            ignore: ":hidden:not(select)"
        );
    
    // - chosen, add the text if no result matched
    if($('.cho').length > 0)
        $(".cho").chosen(no_results_text: "No results matched");
    
);

注意： 如果输入值为null，则类错误将附加到父'div'

【参考方案4】：

//您可以通过使用另一种方式隐藏您选择的元素来解决此问题。比如……

$(document).ready(function() 
 $.validator.addMethod(     //adding a method to validate select box//
            "chosen",
            function(value, element) 
                return (value == null ? false : (value.length == 0 ? false : true))
            ,
            "please select an option"//custom message
            );

    $("form").validate(
        rules: 
            test2: 
                chosen: true
            
        
    );
    $("[name='test2']").css("position", "absolute").css("z-index",   "-9999").chosen().show();

    //validation.....
    $("form").submit(function()
    
        if ($(this).valid())
        alert("valid");
    //some code here 
        
        return false;

    );
);

【讨论】：

此答案仅在您不调用 .chosen() 时才有效。所选库中似乎存在一个错误（功能？），当您激活 时，它会隐藏它 - 因此它不再与验证规则交互。

【参考方案5】：

这个简单的 CSS 规则适用于 joomla 3 的 selected 实现

Chosen 将无效的类添加到隐藏的选择输入中，因此使用它来定位选择的选择框

.invalid, .invalid + div.chzn-container a 
    border-color: red !important;

【讨论】：

就我而言，我添加了 ul.chosen-choices：.input-validation-error border-color: red !important; .input-validation-error, .input-validation-error + div.chosen-container ul.chosen-choices border-color: red !important; 。

【参考方案6】：

我必须放置$.validator.setDefaults( ignore: ":hidden:not(.chosen-select)" ) 在 $(document).ready(function()) 之外，以便使用 selected.js。

https://***.com/a/10063394/4063622

【参考方案7】：

您可能还会遇到问题，即在选择下拉列表之前显示错误消息。我找到了解决此问题的解决方案并将我的代码粘贴到这里与您分享

HTML：

<label class="col-sm-3">Select sponsor level *</label>
<asp:DropDownList ID="ddlSponsorLevel" runat="server" CssClass="col-sm-4 required" ClientIDmode="Static" />
<label class="error" id="ddlSponsorLevel-error" for="ddlSponsorLevel"></label>

Javascript：

if (!$('#ddlSponsorLevel').valid()) 
       $('#ddlSponsorLevel-error').text("You must choose a sponsor level");
            return false;

Jquery Validation 实际上添加了一个隐藏标签的 html 元素。我们可以在不同的地方重新定义这个具有相同ID的元素来覆盖原来的地方。

【参考方案8】：

我花了大约一天的时间来解决这个问题，但一点运气都没有！然后我查看了 Vtiger 使用的源代码，发现了黄金！即使他们使用的是旧版本，他们也有钥匙！你必须使用

data-validation-engine="validate[required]"

如果你不这样做并且你有它，类通过类传递，选择被应用到被选择的，它认为你选择的永远不会更新。如果您不将课程传递给选定的人，这应该是一个问题，但是如果您这样做是唯一可行的方法。

这是选择 1.4.2 验证引擎 2.6.2 和 jquery 2.1.4

// binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine(
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
);

【参考方案9】：

@Anupal 让我走上了正确的道路，但不知何故我需要一个复杂的修复

启用.chosen 考虑

javascript

$.validator.setDefaults( ignore: ":hidden:not(.chosen)" )

或者你给你选择的任何其他名字。这是全局配置。考虑在顶层设置

为选择创建自定义规则

感谢BenG

html

<select id="field" name="field" class="chosen" data-rule-chosen-required="true">
    <option value="">Please select…</option>
</select>

javascript

同样，$.validator 对象的全局配置。可以放在上一条命令旁边

$.validator.addMethod('chosen-required', function (value, element, requiredValue) 
    return requiredValue == false || element.value != '';
, $.validator.messages.required);

【讨论】：

大家好，我的 jqueryvalidation 的焦点有问题，在 chosen 字段上不起作用，你知道如何解决吗问题？

提出一个有一定背景的新问题，很乐意为您提供帮助

【参考方案10】：

jQuery("#formID").validationEngine(
     prettySelect : true,
     useSuffix: "_chzn"
);

jQuery-Validation-Engine/demoChosenLibrary

【参考方案11】：

你也可以试试这个：

$('form').on('submit', function(event) 
    event.preventDefault();
    if($('form').valid() == true && $('.select-chosen').valid() == true)
        console.log("Valid form");
     else 
        console.log("Invalid form");
    
); 

记得在每个selects 上添加.select-chosen 类。

$('.select-chosen').valid() 强制验证隐藏的selects

http://jsfiddle.net/mrZF5/39/

【参考方案12】：

我的表单包含有条件隐藏的字段，为了防止隐藏的选定字段验证失败，我扩展了默认的忽略：进一步隐藏：

$.validator.setDefaults( 
  ignore: ":hidden:not(.chosen-select + .chosen-container:visible)"  //for all select having class .chosen-select
    )

【讨论】：

根本不适合我。 .chosen-select + .chosen-container:visible 部分实际上选择了所选的 <div> 而不是必须验证的 <select>，所以我不清楚这应该如何工作。

【参考方案13】：

我认为这是更好的解决方案。

//trigger validation onchange
$('select').on('change', function() 
    $(this).valid();
);

$('form').validate(
    ignore: ':hidden', //still ignore Chosen selects
    submitHandler: function(form)  //all the fields except Chosen selects have already passed validation, so we manually validate the Chosen selects here            
        var $selects = $(form).find('select'),
            valid = true;
        if ($selects.length) 
            //validate selects
            $selects.each(function() 
                if (!$(this).valid()) 
                    valid = false;
                
            );
        
        //only submit the form if all fields have passed validation
        if (valid) 
            form.submit();
        
    ,
    invalidHandler: function(event, validator)  //one or more fields have failed validation, but the Chosen selects have not been validated yet
        var $selects = $(this).find('select');     
        if ($selects.length) 
            validator.showErrors(); //when manually validating elements, all the errors in the non-select fields disappear for some reason

            //validate selects
            $selects.each(function(index)
                validator.element(this);
            )
         
    ,
    //other options...
);

注意：您还需要更改 errorPlacement 回调以处理显示错误。如果您的错误消息在该字段旁边，您将需要使用 .siblings('.errorMessageClassHere')（或其他方式，取决于 DOM）而不是 .next('.errorMessageClassHere')。

【参考方案14】：

在 2018 年，我正在验证 jQuery validate 抱怨输入字段没有名称。此输入字段由 jQuery Chosen 插件附加。

使用 selected 时，此错误发生在其他任何事情之前。

【参考方案15】：

感谢这个答案https://***.com/a/40310699/4700162我解决了这个问题：

在Chosen.jquery.js文件里面，改变

this.form_field_jq.hide().after(this.container);

用这个：

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);

【参考方案16】：

您可以对“选择”插件使用 jQuery 验证。对我来说工作得很好。

$('.chosen').chosen(
        allow_single_deselect: true
    );
    $.validator.setDefaults( ignore: ":hidden:not(select)" );
        $('form').validate(
            highlight: function(element) 
                $(element).closest('.form-group').addClass('has-error');
        ,
        unhighlight: function(element) 
            $(element).closest('.form-group').removeClass('has-error');
        ,
        errorElement: 'span',
        errorClass: 'help-block text-danger',
        errorPlacement: function(error, element) 
            if(element.parent('.input-group').length) 
                error.insertAfter(element.parent());
             else 
                error.insertAfter(element.parent());
            
        
    );

【参考方案17】：

调用choice()后使用下面的jquery方法

$("#id").css("display":"").addClass("sr-only");

sr-only 是引导类

【参考方案18】：

我最终通过以下方式解决了这个问题：

这是为 Chosen v1.8.7 准备的：

打开 selected.js 并在第 199 行找到：

this.form_field_jq.hide().after(this.container),

将其替换为：

this.form_field_jq.addClass('chosen-master').after(this.container),

将这些 CSS 属性添加到该类：

.chosen-master 
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;

参考：https://***.com/a/64491538/7353382