1

I'm using Nice select which replaces the current <select> dropdown with a <ul> list which can be customized with the CSS. I try to use the jQuery Validate plugin but I can't make it work with <ul> list. It work well if I deactivate 'Nice select plugin' and I keep the current <select> dropdown.

Concretely the form now looks like : 

<form id="MyForm">
 <div class="nice-select">
   <ul class="list">
     <li class="option selected" data-value=""></li>
     <li class="option selected" data-value="51"></li>
     <li class="option selected" data-value="52"></li>
     <li class="option selected" data-value="53"></li>
   </ul>
 </div>
</form>

and the jQuery

$('#MyForm').validate({ 
        rules: {
            list: {
                selectcheck: true
            }
        }
    });

    jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '');
    }, "field required");
});

FIDDLE

(If you delete the line which call nice select to the bottom of the javascript textarea it'll work)

How can I implement the jQuery validate to work as well with nice select ?

Any help would be appreciated

Thanks

colapsnux
  • 872
  • 2
  • 15
  • 32
  • Possible duplicate of [jquery validation with custom style – Ashish Kumar May 31 '16 at 12:26

3 Answers3

4

The problem is that jquery chosen plugin hides the select element, and builds its custom html to imitate it.

At that jquery validation plugin ignores hidden elements by default and doesn't validate them

You can set ignore property for the validator when initializing and force it to not ignore anything:

$('#contact-form').validate({
    ignore: [],
    //your other validation settings
});

Your working code: https://jsfiddle.net/ashishanexpert/xws6bbw8/9/

Reference of this issue:

Community
  • 1
  • 1
Ashish Kumar
  • 2,991
  • 3
  • 18
  • 27
  • I get a issue, I can't submit the form event if I remove the e.preventDefault(); on submit. - if I chose directly the value and click to the submit button it works. - if I select nothing and submit, the validate text appear, then I select some value and submit again and it does not submit now ... What is doing that ?? Thanks – colapsnux May 31 '16 at 14:22
  • @Ashish, I have checked it's working for showing the error, but after select the option error will not remove and not submit the form. – mageDev0688 Jul 03 '17 at 19:12
1

Here is a more elegant solution

<style>
    select {
        display: block !important;
        margin: 0;
        border: 0;
        padding: 0;
        height: 1px;
        opacity: 0;
        position: relative;
        /* Top should be the same as the height of your */
        /* unfocused, nice select replacement element! */
        top: 30px;
    }
</style>
<select name="my-field" required tabindex="-1"></select>

Source https://github.com/hernansartorio/jquery-nice-select/issues/19#issuecomment-403909062

Max_Payne
  • 142
  • 1
  • 1
  • 12
  • There's an issue with this. When the user does not select a value in the list for the first time, it will who the HTML validation error. However, when the user corrects the value in the list, it continues showing the validation error and does not clear it off (seems like a change event needs to be propagated to the select element for this work work, I think) – Ameed Aabidi May 16 '21 at 03:03
1

Only ignore method not enough for select nice validation because nice select module reflect the value change to its original select box by using before the element in that place validation module puts error element so that's why conflicts occurred so please change error message positions insertbefore instead of insertAfter

 $('#contact_form').validate({
            ignore: [],
            errorPlacement: function(error, element) {
                error.insertBefore(element);
            }
    });
Neeraj
  • 749
  • 6
  • 15
Somu Sekhar
  • 11
  • 1
  • Working fine but error message breaking UI of nice-select might be it will work fine on simple select dropdown – kantsverma Jul 29 '23 at 08:38