Question

我有一个包含文件类型输入的表单，但在设计中我不想显示默认的浏览按钮，所以从css我将它转换为文本。这是我的代码。

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

 });

这是演示链接..
http://jsfiddle.net/rashvish18/eLsDs/9/

但是当我通过jquery验证器验证它时，它没有经过验证。提前致谢

Answer 1

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

甚至更好：

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

使用jquery验证输入类型文件

1 个答案: