如何在“选择的”插件中使用jQuery验证?


77

我有一些<select>使用所选插件的输入,这些输入要在客户端验证为“必需”。由于“选择”会隐藏实际的select元素并创建具有div和spans的小部件,因此本机HTML5验证似乎无法正常工作。表单不会提交(很好),但是不会显示错误消息,因此用户不知道出了什么问题(不好)。

我转向了jQuery验证插件(无论如何我最终还是打算使用该插件),但是到目前为止还没有任何运气。这是我的测试用例

<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()行时,它工作正常。

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


1
检查这个插件了。并不是真正的解决方案,但您可能想尝试一下。
elclanrs 2012年

@elclanrs:谢谢,但是我现在想坚持使用事实上的jQuery验证库,尤其是在项目的这一点上(试图总结一下)。也许在将来的项目中。
Wesley Murch 2012年

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

Answers:


120

jQuery validate会忽略隐藏的元素,并且由于Chosen插件visibility:hidden向select添加了属性,请尝试:

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

要么

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

validate()功能之前添加此行。这对我来说可以。


1
就我而言,这已经足够了。谢谢。
尼克,

1
你把这条线放在哪里?它似乎对我不起作用:/
Charles Wood

1
就在JQuery validate()函数的上方。
2013年

1
为我工作!绝对是最简单的解决方案。
kmgdev 2014年

7
因为我选择的所有选择都有该类,.chosen-select所以我觉得更好用$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });。否则,这将意味着将验证所有隐藏的选择。
Tobias

19

jQuery验证不会选择隐藏的元素,但是您可以强制其验证单个元素。有点骇人听闻,但以下方法会起作用:

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

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


2
似乎e.preventDefault()甚至没有必要,只需致电即可$("element").valid()。我使用了这段代码,它似乎可以完美地工作:$('form').on('submit', function() {$('.chzn-done').valid();});。谢谢(你的)信息。
Wesley Murch 2012年

4
.chzn-done从选择1.0开始不再添加到“选择”元素中
塞巴斯蒂安·扎克拉达

5

在我的。

我的表格有'validate'类,每个输入元素都有'required'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>

和jQuery验证选择的javascript代码

$(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”


3

//您可以使用另一种隐藏您选择的元素的方法来解决此问题。例如....

$(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()时,此答案才有效。所选库中似乎有一个错误(功能?),当您激活<select>时,它会隐藏它-因此它不再与验证规则交互。
扎克·莫里斯

2

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

选择将无效的类添加到隐藏的选择输入中,因此可以使用此对象来定位选择的选择框

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

就我而言,我已经添加ul.chosen-选择.input-validation-error { border-color: red !important; } .input-validation-error, .input-validation-error + div.chosen-container ul.chosen-choices { border-color: red !important; }
pas


1

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

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验证实际上添加了一个隐藏标签html元素。我们可以在不同位置用相同的ID重新定义此元素,以覆盖原始位置。


1

我花了整整一天的时间,根本没有运气!然后,我查看了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"
});

1

@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时遇到问题,在所选字段上不起作用,您知道如何解决该问题吗?
Paul Noris

提出一些具有背景知识的新问题,很高兴会有所帮助
Alwin Kesler


0

您也可以尝试以下操作:

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

请记住.select-chosen在每个上添加类select

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

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


0

我的表单包括有条件的隐藏字段,为防止隐藏的选定字段无法通过验证,我扩展了默认的ignore:hidden:

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


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

0

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

//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')


0

在2018年,我正在验证jQuery validate是否抱怨一个没有名称的输入字段。此输入字段由jQuery Chosen plguin附加。

在此处输入图片说明

使用selected时,此错误首先发生。



0

您可以对“选择的”插件使用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());
            }
        }
    });

0

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

$(“#id”)。css(“ display”:“”)。addClass(“ sr-only”);

sr-only是引导带类


0

我通过执行以下操作最终解决了该问题:

这是针对选择的v1.8.7:

  1. 打开selected.js并在第199行找到以下代码:

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

  1. 替换为:

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

  1. 将这些CSS属性添加到该类:
.chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

参考:https : //stackoverflow.com/a/64491538/7353382

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.