用jquery調用輸入類型文件

我有一個包含文件類型輸入的表單，但在設計中我不想顯示默認瀏覽按鈕，所以從CSS我將它鏈接到文本。這是我的代碼。用jquery調用輸入類型文件

的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驗證器驗證它，它不geting驗證。在此先感謝

來源

2012-11-21 Rashmi Kumari

有什麼問題嗎？ – lifetimes

Validator插件不默認*驗證隱藏的元素。 – Abhilash

有沒有辦法做到這一點，我的意思是改變瀏覽按鈕到文本並驗證它。 –

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

甚至更好：

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

來源

2012-11-24 10:01:08 Mori

用jquery調用輸入類型文件

回答

相關問題