Question

I have a form containing file type input ,but in the design i dont want to show the default browse button,so from css i m chaning it to a text.
here is my code.

Html

 FORM #1:<br/>
<form action="#" id="one">
<span id="browse_fb">Upload photo...</span>
<input type="file" name="input1" class="required" />
</form>
FORM #2:<br/>
<form action="#" id="storyform">
<input type="text" name="story" class="required" /><br />
<input type="text" name="place" class="required" /><br />
<input type="submit" />
</form>

CSS

input[type="file"] {
display: block;
visibility: hidden;
width: 0;
height: 0;
}

JAVASCRIPT

$(document).ready(function() {
$('#browse_fb').click(function() {
$('input[type=file]').click();
});
$("form#one").validate({ // initialize form validation on form 1
    // rules & other options
});

$("#storyform").validate({ // initialize form validation on form 2
    rules: {
        story: {
            required: true,
            maxlength: 250
        },
        place: "required"
    },
    messages: {
        story: {
            required: "Please write your story",
            maxlength: $.format("At Max {0} characters !")
        },
        place: "Please write your place"
    },
    errorElement: "span",
    wrapper: "span",
    errorPlacement: function(error, element) {
        $("form#one").valid();
        error.insertAfter(element); // default error placement
    },
    submitHandler: function(form) {
        if ($("form#one").valid()) { // test to see if form 1 is valid
            alert('both are valid');
        }
        return false;
    }
});

 });

Here is the demo link..
http://jsfiddle.net/rashvish18/eLsDs/9/

But when I m validating it by jquery validator ,it is not geting validated .
Thanks in advance

Answer 1

input[type="file"] {
display: block;
visibility: hidden;
width: 1px;
height: 1px;
}

Or even better:

input[type="file"] {visibility: hidden;}
label.error[for=input1] {display: block;}