1

ファイルタイプの入力を含むフォームがありますが、デザインではデフォルトの参照ボタンを表示したくないので、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バリデーターで検証すると、検証されません。前もって感謝します

4

1 に答える 1

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

またはさらに良い：

input[type="file"] {visibility: hidden;}
label.error[for=input1] {display: block;}
于 2012-11-24T10:01:08.637 に答える