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:
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
}
});
});
jQueryJavaScriptHTMLWeb Languages and Standards
Last Comment
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
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/
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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_
.....
success: function(a, b) {
a = $(a);
b = $(b);
var id = b.attr('id');alert('succes
i'm getting for the success alerts like :success_undefined;
Now i'm trying to find why.
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_
.....
success: function(a, b) {
a = $(a);
b = $(b);
var id = b.attr('id');alert('succes
i'm getting for the success alerts like :success_undefined;
Now i'm trying to find why.
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
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.
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.
ASKER
Thank you very much
regards
panos
regards
panos
Great news. Thanks for the points