How can I highlight the "selected" plugin as a required field?
The following dropdown code and I want this field as needed, but the validation check fails.
<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>
confirmation code
$('#Form').validate();
How do I confirm that the selected field is correct when submitting a form? for example "This field is not required .
source to share
I ended up using the workaround mentioned at https://github.com/harvesthq/chosen/issues/2075#issuecomment-193805605
That is, find the one chosen.jquery.js
that says
this.form_field_jq.hide().after(this.container);
and replace it with
this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container);
This is a hack to "make invisible" an element select
instead of telling the browser to hide it. Therefore, Chrome will be able to find an item when it needs to display the message "Please select an item from the list."
source to share
If you are using Chosen for all elements select
, you can use this CSS to change to make it visible (for the DOM), but without transparency, height, absolute position.
These CSS selectors target invalid select elements, with one targeting the multiple
elements, adding margin-top
sizing 15px
to center it on the multiple choice elements.
select:invalid {
height: 0px !important;
opacity: 0 !important;
position: absolute !important;
display: flex !important;
}
select:invalid[multiple] {
margin-top: 15px !important;
}
source to share
I know this is an old question, but I ran into this problem, so I solved this:
$("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');
}
}});
Css is simple
.redBorder{ border: 1px solid red;)}
What does it mean - it goes through all the input elements (in my form) and checks if they are empty or not and then checks a specific search box styled with the selected one - if the given element is the one I need sets the css to the generated selected new element.
Works with IE 11 and most versions of Firefox and Chrome.
source to share
The "Favorite" plugin creates some HTML markup and hides the original html <select>
.
To highlight / mark the selected element as an error (by adding the .error CSS class) we need to override / change the default "higlight" and "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 a CSS example:
.chzn-container.error a{
border: 1px solid #ff0000;
}
source to share
It depends on what kind of lighting you want. Here you have an example of how I am doing the checks including the selected combination required. Perhaps more information than you wanted, but I think it’s hard to figure out how it works without everything.
First, I use the validate class for validation, which I add or remove to elements as needed. and I have specific CSS for the selected like this:select.validate:invalid+.chosen-container
so the complete code would 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 is for validating any form:
if(validateFields('formId')) {
//TODO
}
This works fine with the selected one for me
source to share
use JSFIDDLE<form>
tag
<form>
<select id="mood" rel="chosen" required name="moodName">
<option value=""></option>
<option value="">Select Option</option>
<option value="69">AGITATED</option>
<option value="115">ALOOF</option>
<option value="46">AMUSED</option>
</select>
<input type="text" required></input>
<input type="submit" value="pass">
</form>
source to share