Select box does not validate, jqtransform jquery validate - jquery-validate

Question

Trying to get jquery validate to work with jqtransform. I see the problem
seems to be the hidden select box. It does not add the error class to this element
so it does not continue to add the error message! If I make jqTransformHidden class
to display:block; it works but then all my inputs and selects are visible, which I do not want of course.
As you can see no error class is added.
<select class="required jqTransformHidden" name="currency">
<option value="">Choose Currency</option>
<option value="29">ANG - Netherlands Antilles, Guilders</option>
</select>

Answer 1

I had exactly the same problem, and this is how I got around it.
I use jquery validate for vaidating everything except select boxes. Once jquery validate thinks my form is valid, I set up another custom validation for select boxes.
You can check that within the selectHandler.
submitHandler: function(form){
if(validateSelect()){
form.submit();
}
},
And then you can create a validateSelect function to check your select boxes. You can use the jquery .val() for that.
validateSelect = function(){
if($('#my-select').val()==""){
return false;
}else{
return true;
}
}
UPDATE: I have found a much simpler solution ! You can force jQuery Validate to check hidden fields by turning ignore: ":hidden", into ingnore: "", in the validate script at line 218. That way, every transformed field will still be validated. You might also be able to set this change in your custom script instead of the plugin script, but I am not sure how to do so.

Answer 2

I know this is an old question, but for all those who are struggling with this, here is my solution:
In my case it seems like using ignore: "" does not do the trick to select inputs. Instead of hiding the hidden fields with CSS display: none I used position: absolute; top: -9999px; left: -9999px;
The easiest way is to edit the jqTransform.css file like this:
.jqTransformHidden {
//display: none;
position: absolute;
top: -9999px;
left: -9999px;
}