CODEWITHSUNDEEP
jquery-select2jquery-validation-engine
user1900685
user1900685

Reputation: 193

jQuery Select2 & Validation Engine

How to correctly validate option value that uses Select2? I have a problem when some value is set before changing to any other. It looks correctly, but validation error is shown until I'll change value. Thank you for any help.

Upvotes: 0

Views: 3757

Answers (5)

Tincho Rockss
Tincho Rockss

Reputation: 51

Select2 library make the original selector hidden, and validation engine can not work for hidden element, so first is make the visible, then the validation engine can see it. The second is we need to make the selector element hidden for us, there are about 2 ways to do, such as set it’s opacity into “0”, or make it’s height/width as “0px”, actually we need both.

Below is the code example:

$("select").select2();
$.each($(".select2-container"), function (i, n) {
  $(n).next().show().fadeTo(0, 0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
  $(n).prepend($(n).next());
  $(n).delay(500).queue(function () {
    $(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
    $(this).dequeue();
  });
});

Reference: http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/

Upvotes: 0

Syed Ali Hussain Bukhari
Syed Ali Hussain Bukhari

Reputation: 1

add this css to your head tag.

   .has-error {
        border-color: #dd4b39 !important;
    }

and this is how i am calling select2 for Jquery validation engine.

$("#form").validate( {
            ignore: ".ignore, .select2-input",
            rules: {
                txtproduct: "required",
                txtwarehouse: "required",
                //txtdescription: "required",
                txtquantity: {required:true,number:true},
                txtrate: {required:true,number:true},
                txtdiscounttype: "required",
                txtdiscount: {required:true,number:true},
                txtamount: {required:true,number:true},
            },
        highlight: function ( element, errorClass, validClass ) {
                $(element).addClass("has-error");
                if($(element).hasClass('select2-hidden-accessible'))
                {
                    $(element).next().find("[role=combobox]").addClass('has-error');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass("has-error");
                if($(element).hasClass('select2-hidden-accessible'))
                {
                    $(element).next().find("[role=combobox]").removeClass('has-error');
                }
            }
        } );

}

Upvotes: 0

user1562300
user1562300

Reputation:

I had the same problem. So in select2.min.js find this strokes (should be 2 strokes in script):

D(this.container,this.opts.element,this.opts.adaptContainerCssClass)

and add this code right after stroke you've found

,this.container.removeClass("validate[required]")

this should solve your problem.

Upvotes: 0

ozgrozer
ozgrozer

Reputation: 2042

In select2.js file

Find this (Line 341)

if (this.indexOf("select2-") !== 0) {

And replace with

if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {

Upvotes: 1

mrrsb
mrrsb

Reputation: 671

Try this solution.

How to make jQuery validation engine works well for select2()?

Upvotes: 1

Related Questions