发表新帖
发表新帖

How can I use jQuery validation with the “chosen” plugin?

后端 未结
关注
18 2133
夕颜
夕颜 2020-11-28 05:45

I have some

提交评论
  •  加载中...
  • 长情又很酷
    2020-11-28 05:51

    I spent about a day working on this and had no luck at all! Then I looked at the source code Vtiger was using and found gold! Even though they were using older versions they had the key! you have to use 

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

    If you don't and you have it where classes are passed through the class for the select gets applied to the chosen and it thinks that your chosen never gets updated. If you don't pass the class onto the chosen this should be a problem, BUT if you do this is the only way it will work.

    This is with chosen 1.4.2 validationEngine 2.6.2 and jquery 2.1.4

    // binds form submission and fields to the validation engine
jQuery("#FORMNAME").validationEngine({
    prettySelect : true,
    useSuffix: "_chosen"
    //promptPosition : "bottomLeft"
});
    0 讨论(0)
  • 长情又很酷
    2020-11-28 05:52

    After calling chosen() use below jquery method

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

    sr-only is boot strap class

    0 讨论(0)
  • -上瘾入骨i
    2020-11-28 05:53

    I ended up solving it by doing the following:

    This was for Chosen v1.8.7:

    1. Open chosen.js and on line 199 locate this:

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

    1. Replace that with this:

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

    1. Add these CSS attributes to that class:
    .chosen-master {
  display: inline-block !important;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

    Reference: https://stackoverflow.com/a/64491538/7353382

    0 讨论(0)
  • 不要未来只要你来
    2020-11-28 05:55

    You can also try this:

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

    Remember to add .select-chosen class on each selects.

    $('.select-chosen').valid() forces the validation for the hidden selects

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

    0 讨论(0)
  • 花落未央
    2020-11-28 05:58

    You might also running into trouble that error message is displayed before Chosen dropdownlist. I found out the solution to resolve this issue and paste my code here to share with you

    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 actually added a hidden label html element. We can re-define this element with same ID on different place to overwrite original place.

    0 讨论(0)
    • 1 2 3 下一页
     看不清?
    提交回复
    热议问题