valiadting input type file with jquery

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

Validator plugin doesn't by default validate hidden elements. — Abhilash
– Abhilash, Commented Nov 21, 2012 at 13:46
Is there is any way to do that,I mean change browse button to a text and validate it. — Rashmi Kumari
– Rashmi Kumari, Commented Nov 21, 2012 at 13:48
@Abhilash: Validator plugin doesn't by default validate hidden input fields, i.e <input type="hidden">. — Mori
– Mori, Commented Nov 24, 2012 at 9:58

Mori · Accepted Answer · 2012-11-24 11:24:01Z

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;}

edited Nov 24, 2012 at 11:24

answered Nov 24, 2012 at 10:01

Mori

7,10220 gold badges71 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

valiadting input type file with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related