发表新帖
发表新帖

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

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

I have some

提交评论
  •  加载中...
  • 别跟我提以往
    2020-11-28 06:11

    I had to place $.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" })
    outside $(document).ready(function()) in order to work with chosen.js.

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

    0 讨论(0)
  • 北荒
    2020-11-28 06:13

    //You can fix this by using another way to hide your chosen element. eg....

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

    });
});
    0 讨论(0)
  • 囚心锁ツ
    2020-11-28 06:13

    you can use jQuery validation for “chosen” plugin. Working fine for me.

    $('.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 讨论(0)
  • 情深已故
    2020-11-28 06:15

    in mine.

    my form has class 'validate' and every input element has class 'required' html code:

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

    and javascript code for choosen with jquery validation

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

    note: if the input value is null, the class error will be append to parent 'div'

    0 讨论(0)
  • 迷失自我
    2020-11-28 06:15

    this simple CSS rule works on joomla 3's implementation of chosen

    Chosen adds the class invalid to the hidden select input so use this to target the chosen select box

    .invalid, .invalid + div.chzn-container a {
    border-color: red !important;
}
    0 讨论(0)
    • 上一页 1 2 3
     看不清?
    提交回复
    热议问题