How I can highlight as required field with “chosen” Plugin?

问题

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:

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

回答6:

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>

来源：https://stackoverflow.com/questions/25717842/how-i-can-highlight-as-required-field-with-chosen-plugin

标签

jquery

jquery-chosen