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

LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)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
PanosAuthor 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/
RobOwner (Aidellio)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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

PanosAuthor 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)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
PanosAuthor 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.
PanosAuthor Commented:
Thank you very much
regards
panos
RobOwner (Aidellio)Commented:
Great news. Thanks for the points
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.