Following dropdown code and I want to this field as required but there is no checking for validation.
<select id="mood" rel="chosen" required="required" name="moodName">
<option value="">Select Option</option>
<option value="69">AGITATED</option>
<option value="115">ALOOF</option>
<option value="46">AMUSED</option>
</select>
Validation Code
$('#Form').validate();
How to validate as required field of chosen field when Submit form? like "This field is required".
If you're using Chosen for all select elements, you can use this CSS to change make it visible (to DOM), but no opacity, no height, absolute position.
These CSS selectors target invalid select elements, with one of them targeting multiple adding a 15px margin-top to center it on the multiselect elements.
select:invalid {
height: 0px !important;
opacity: 0 !important;
position: absolute !important;
display: flex !important;
}
select:invalid[multiple] {
margin-top: 15px !important;
}
I ended up using the workaround mentioned in https://github.com/harvesthq/chosen/issues/2075#issuecomment-193805605
That is, find the line in chosen.jquery.js that says
this.form_field_jq.hide().after(this.container);
and replace it by
this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);
It is a hack to "make invisible" the select element instead of telling the browser to hide it. Hence Chrome will be able to find the element when it needs to show the "please select an item in the list" message.
As 'Chosen' plugin creates some HTML markup & hides original html <select>.
To highlight/mark chosen element as error (by adding CSS class .error) we need to override / modify default 'higlight' & 'unhiglight' functions:
$.validator.setDefaults({
ignore: ":hidden:not(select)",
highlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
} else {
$( element ).addClass( errorClass ).removeClass( validClass );
// chosen specific
if( $(element).hasClass('chzn-done') ){
//$( element ).parent().find('.chzn-container').addClass( errorClass ).removeClass( validClass );
$('#' + element.id + '_chzn').addClass( errorClass ).removeClass( validClass );
}
}
},
unhighlight: function( element, errorClass, validClass ) {
if ( element.type === "radio" ) {
this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
} else {
$( element ).removeClass( errorClass ).addClass( validClass );
// chosen specific
if( $(element).hasClass('chzn-done') ){
$('#' + element.id + '_chzn').removeClass( errorClass ).addClass( validClass );
}
}
}
});
And some example CSS:
.chzn-container.error a{
border: 1px solid #ff0000;
}
I know this is an old question, but I bumped into this problem, so the way I solved it:
$("form").find('input, textarea, select').each(function() {
if($(this).prop('required')) {
if(!$.trim(this.value).length) { do something ..}
// this here checks if input is only spaces (prevents the html required fields to accept spaces as input)
}
if(this.id == "selectBox"){
if(this.value == ""){
e.preventDefault();
$('#selectBox_chosen').addClass('redBorder');
} else {
$('#selectBox_chosen').removeClass('redBorder');
}
}});
The css is just
.redBorder{ border: 1px solid red;)}
What this does is - it goes through all the input elements (in my form) and checks if they are empty or not and then checks for the specific search box styled with Chosen - if the given element is the one I need it sets the css to the generated by Chosen new element.
Works with IE 11 and most versions of Firefox and Chrome.
It depends on what kind of highlight do you want. Here you have an example of How I do validations including chosen required combo. Probably more info than you wanted, but I think that Without all is difficult to understand how does it works.
At first I use for validtion a class validate that I add or remove to elements when is necesarry. and I have the expecific CSS for chosen like this: select.validate:invalid+.chosen-container
so the full code will be:
/* CSS */
.validate:invalid, .validate:invalid+label,
select.validate:invalid+.chosen-container {
box-shadow: 0px 3px 0px -1px red;
background-color: #fdf0f0;
}
with this method:
function validateFields(formId) {
var dataIsValid = false;
var id = formId != '' && formId != undefined ? '#' + formId : ''
if(jQuery(id + ' :invalid').length > 0) {
jQuery(id + ' :valid').removeClass('validate');
jQuery(id + ' :invalid').addClass('validate');
openModal('invalidData');
} else {
jQuery(':valid').removeClass('validate');
dataIsValid = true;
}
return dataIsValid;
}
and this for validate any form:
if(validateFields('formId')) {
//TODO
}
This works fine with chosen for me
I just ran into this same problem. @AlejandroVD's answer pointed me in the right direction (Github) where I eventually found these two responses:
I combined the JS from the first link with the CSS from the second and it worked well.
Specifically, here's what I did for Chosen v1.8.7:
this.form_field_jq.hide().after(this.container),
this.form_field_jq.addClass('chosen-master').after(this.container),
.chosen-master {
display: inline-block !important;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
}
select:invalid {
height: 0px !important;
opacity: 0 !important;
position: absolute !important;
display: flex !important;
}
select:invalid[multiple] {
margin-top: 15px !important;
}
