asked on

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

Rob

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

Panos

ASKER

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/

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

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.

Rob

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

Panos

ASKER

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.

Panos

ASKER

Thank you very much
regards
panos

Rob

Great news. Thanks for the points