We help IT Professionals succeed at work.

jquery ui selectmenu validation

Hello experts.
I m validating my form using Jquery validation plugin. Because i want to style my selectmenus with jquery ui i have a problem with error and valid styling of the ui select elements
using the errorPlacement i m able to style the ui element adding ui-state-error class
The problem is to show the ui-state-valid on validation.
Any help?
My js code:
var selectone = 'Please select';
$(function(){
	$('select').selectmenu({
	  style:'dropdown',
	  transferClasses: true,
      width: null,
      change: function() {
		var id = $(this).attr('id');
	   // $('#' + id + '-button,#' + id + '-menu').removeClass('ui-s<wbr ></wbr><wbr ></wbr>tate-error<wbr ></wbr> ui-state-valid');
        $("#Form1").validate().element(this);
       }
    });
	jQuery.validator.addMethod("selectNone", function(a) {return true});
	$("#Form1").validate({
        errorPlacement: function(a, b) {
                      if(b.is("select")){
				a.appendTo(b.closest("div"))
				var id = b.attr('id');
	            $('#' + id + '-button,#' + id + '-menu').removeClass('ui-state-error ui-state-valid');
				$('#' + id + '-button,#' + id + '-menu').addClass('ui-state-error');
			}
			else {
                a.appendTo(b.closest("div"))
            }
        },
		ignore: [],
		rules: {
            selectmenu_1: {required: true},
            selectmenu_2: {required: true},
            selectmenu_3: {required: false,selectNone: true}
        },
        messages: {
            selectmenu_1: selectone,
            selectmenu_2: selectone  
        }
        
    });
});

Open in new window

Comment
Watch Question

RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
Please post the markup you're using as it will help me create a test.  Better yet, can you create one here: jsbin.com

Author

Commented:
Hi
I tried to create a test page including the validation plugin and the ui-selectmenu js code,
take a look here:
https://jsfiddle.net/panosms/s5h7t924/1/
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
I couldn't get jsfiddle to work so I ported it to jsbin.  Does this work for you?

http://jsbin.com/weqawoqico/1/edit?js,output

I had to change the validation slightly as the rules didn't correspond to the IDs of your selects.  Also had to add the success callback to the validator

Author

Commented:
Hi Rob Jurd
Thank you for your code. It seems to work fine but i have a problem using this in my page.
I had tried the success callback and i realized now why it did not work.
adding alerts after errorPlacement and success callback like:
errorPlacement: function(a, b) {
                  var id = b.attr('id');alert('error_' + id);
.....
success: function(a, b) {
          a = $(a);
          b = $(b);
              var id = b.attr('id');alert('success_' + id);

i'm getting for the success alerts like :success_undefined;
Now i'm trying to find why.
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
Good to hear the code's working. Instead of alert, use console.dir(b). You'll get an object outputted to the console in the developer tools that you can readily navigate

Author

Commented:
Hi Rob Jurd
I was thinking and thinking and i realized that you did use a newer version of the validation plugin that i had. That 's why the succes function was not working correctly for me.
Thank you very much for your help.

Author

Commented:
Thank you very much
regards
panos
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
Great news. Thanks for the points