jQuery Forum

Hi, I'm using the jQuery form validation plugin along with the fileinput plugin which hides the initial input area, but uses <divs> and some styling /javascript to show the file input field.

The issue I am having, is that the 'this field is required' text that is meant to show on submission, doesn't come up for the file input field, nor some checkboxes that I have in a table. I am guessing that this is because the code is needing the label to be RIGHT next to the element (in this case the file input or the checkbox) in order for the validation message to show..

Are there any work arounds that anyone knows of so that I can get the error message to show?

The code I have for the error message and required fields is as follows:


jQuery(function(){
    var $ = jQuery;
    // adds the required flags
    var requiredFlag = '<span class="requiredFlag"> *</span>';
    $('#cssform :input[type=text], #cssform :input[type=file], #cssform :input[type=radio]').filter('.required').prev('label').append(requiredFlag);
    $('#cssform').find("textarea").filter('.required').prev('label').append(requiredFlag);
$('#cssform').find("select").filter('.selectbox').parent('.container-selectbox').prev('label').append(requiredFlag);

    var options = {
        // debug: false,
        errorElement: "span",
        errorPlacement: function(error, element) {
            error.appendTo(element.prev("label"));
        },
 
        submitHandler: function(form) {
            // prevent multiple submissions
            if (! this.pendingRequest) {
                this.pendingRequest = true;
                form.submit();
            }
           }
    };

    if (window["validate_options"])
        $.extend(options, window["validate_options"]);

    $("#cssform").validate(options);
});


and the html for the form I am trying to validate (copied from firebug to show you the auto-inserted wrappers around the fileinput field) and the areas I am having issues with:
 <label>Choose some letters </label>
    <table>
    <tr>
    <td>
    <input class="required" name="letter" type="checkbox" value="a">
    <label class="unstyle">a</label>
    <input name="letter" type="checkbox" value="b">
    <label class="unstyle">b</label>
    <input name="letter" type="checkbox" value="c">
    <label class="unstyle">c</label>
    <input name="letter" type="checkbox" value="d">
   <label class="unstyle">d</label>
    </td></tr></table>
    <h2>File Upload</h2>
    <label>File upload</label>
<div class="fileinput-wrapper ui-widget">
      <span class="fileinput-input ui-state-default ui-widget-content ui-corner-left">No file selected</span>
      <span class="fileinput-button ui-state-default ui-widget-header ui-corner-right">
                  <span class="fileinput-button-text">Choose File</span>
      </span>
<input type="file" name="resume" class="required fileinput fileinput-file" style="top: -7.3667px; left: -32.3333px;"></div>

Is there a way to show the error message for required fields when they have a div wrapping them or anything wrapping them?

Thanks,