1

Hi i have referred this for the dropdown box validation. It's working fine for only one dropdown if i have more than one means it not showing correctly

$(document).ready(function () {
    $('.default').dropkick();
    $('.example_form').validate({
        highlight: function (element, errorClass) {         
            $(element).siblings('.dk_container').addClass('error');  
            $('.dk_toggle').css('border', 'none');
        },
        unhighlight: function(element, errorClass) {
            $(element).siblings('.dk_container').removeClass('error');  
            $('.dk_toggle').css('border', '1px solid #ccc');
        }
    });
});

Here is a fiddle

how would highlight the error for each field

Community
  • 1
  • 1
jackyesind
  • 3,343
  • 14
  • 47
  • 74

2 Answers2

2

Try this fiddle:

http://jsfiddle.net/yWANA/5/

It is fixed now.

The problem is with the highlight code you had written.

If you write alert in highlight you will find it will come only for error

Here is some code:

 $(document).ready(function () {
$('.default').dropkick();
$('.example_form').validate({
    highlight: function (element, errorClass) {   
         $(element).prev().addClass('error');
         //$(element).prev().addClass('error'); 
         $('.dk_toggle').css('border', 'none');
    },
    unhighlight: function(element, errorClass) {
        $(element).prev('.dk_container').removeClass('error');  
        $('.dk_toggle').css('border', '1px solid #ccc');
    }
});

});

Moons
  • 3,833
  • 4
  • 49
  • 82
1

Just have one hidden field for the each drop down and assign the values to the hidden field when u change the dropdown value. and write a required field validation to the hidden field

$('#country').dropkick({
    change: function (value, label) {
        $('#countryHidden').val(value);
      }
});

$('.example_form').validate({
   ignore: "",
    rules : {
        countryHidden : {
            required: true
        }
    },
    messages : {
      countryHidden : {
            required:"Please select your  country"              
        }  
    } 
});

fiddle

muthu
  • 5,381
  • 2
  • 33
  • 41
  • Firstly, that's obviously not the effect the OP is looking to do. And secondly, [see this](http://stackoverflow.com/a/8565769/594235) for how to properly use the `ignore:` option. – Sparky Feb 14 '13 at 16:32