How I can highlight as required field with “chosen

问题:

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

回答1:

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.

回答2:

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

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/

回答3:

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.

回答4:

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

回答5:

use <form> tag JSFIDDLE

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