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.
1
-
Can you demonstrate the issue with some code? I can't visualise what you mean.Simon Adcock– Simon Adcock2013-12-15 18:31:58 +00:00Commented Dec 15, 2013 at 18:31
Add a comment
|
5 Answers
Try this solution.
How to make jQuery validation engine works well for select2()?
1 Comment
kleopatra
Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.
In select2.js file
Find this (Line 341)
if (this.indexOf("select2-") !== 0) {
And replace with
if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {
Comments
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.
Comments
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');
}
}
} );
}
2 Comments
Noël Widmer
Answers the provide plain code are not accepted on Stack Overflow. Can you please explain what your solution does and how it solves the problem.
Syed Ali Hussain Bukhari
Hi Neol this is Jquery Validation Engine Issue which is not support for select2 library, i mofidied it using if condition line and it work for me perfectly. if($(element).hasClass('select2-hidden-accessible')) { $(element).next().find("[role=combobox]").removeClass('has- error'); }
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/