jQuery inline form validation - hidden field

Question

I'm using following validator for my project: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ .

I've encountered some difficulties, while using it with Chosen ( http://harvesthq.github.com/chosen/ ) which replaces default "select" tag with some divs, and make select tag hidden.

Basicly that's very same issue as described here: https://github.com/harvesthq/chosen/issues/473 but it shouldn't be really adressed as chosen issue, but rather validator.

So the question is - is there any simple solution to use that validator to iclude hidden fields? I've tried removing all parts of script sources that say to ignore hidden fields, but that doesnt solve the problem. whenever I'm submitting form, it validates all fields except hidden ones.

Thanks in advance for any help

Answer 1

I had a similar problem to this when using a 'select prettifier' jQuery script. Rather than hide the original select, which as you've seen means the jQuery validate ignores it, I set it's position to absolute and set it's left position well off the page:

.hidden-field { 
    position: absolute;
    left: -9999px;
}

There may be a more elegant solution to this though.

Answer 2

The above solution is not an ideal solution. If you go back to the github issue you referenced above you will see a better solution that doesn't involve 'hacking' any of the plugins you are using.

Answer 3

Here's the solution I've finally went with in case some1 would need it as well:

function validateChosen(targetId){
if ($('#'+targetId).val()=='') {
    valid=false;
    $('#'+targetId+'_chzn').validationEngine('showPrompt', '* Field required','','topRight',true);
  } else {
    $("."+targetId+"_chznformError").fadeOut("normal",function(){
      $(this).remove();
    });
  }
}