僅使用提交按鈕啓動驗證

我正在使用按鈕進行文件上傳。如果我按它，它開始驗證。我如何才能驗證，如果我按下提交按鈕？僅使用提交按鈕啓動驗證

的Html公式推

<form id="form_import"method="post" enctype="multipart/form-data"> 

<button>Choose File</button><span id="filename">no file chosen.</span> 
<input type="file" name="file"/> 
<input type="submit"> 

</form>

的Javascript

$(document).ready(function() { 
$("button").click(function() { 
    $("input[type='file']").click(); 
}) 
}); 

$(document).ready(function() { 
$("input[type='file']").change(function() { 
    var filename = $("input[type='file']").val().split('\\').pop(); 
    $("#filename").html(filename); 
}) 
}); 

$(document).ready(function() { 
$("input[type='submit']").click(function() { 
    $("[id^=form]").validate({ 
     submitHandler: function(form) { 
      form.submit(); 
     } 
    }) 
}) 
}); 

$(document).ready(function() { 
$("#form_import").validate({ 
    rules: { 
     "file": { 
      required: true 
     } 
    } 
}) 
});

CSS

input[type=file] { 
visibility: hidden; 
}

來源

2014-02-12 Jayni

顯示相關JavaScript代碼，包括表單的_complete relevant_標記。你真的在使用標籤所示的jQuery Validate插件嗎？如果是這樣，默認情況下，直到按下提交按鈕纔會有驗證。換句話說，它就是這樣工作的。 – Sparky

事件發生後，我該怎麼做？它發生，當我按下按鈕時，它現在沒有選擇文件。 – Jayni

您誤解了'.validate（）'方法的用途。它僅用於_initializing_插件，而不用於測試表單。一旦正確初始化，測試就會自動完成。 – Sparky

您正在使用的插件錯誤，與其他一些不尋常的事情一起。

1）對於每個代碼塊，您都不需要單獨的DOM就緒事件處理程序$(document).ready(function(){...})。它們都可以包含在一個實例中。

2）您不能不止一次致電.validate()。 .validate()方法僅用於初始化您窗體上的插件...沒有別的。隨後調用它將不起作用。

3）你不應該把.validate()裏面的click處理程序。由於您已經在DOM準備好的處理程序中調用它，所以第二個實例將被忽略。

4）您正在將form.submit()放入submitHandler回調函數的內部。這是完全多餘的，因爲這已經是插件的默認行爲。如果這確實是submitHandler中唯一的代碼，那麼您可以刪除整個submitHandler函數。由於上述原因＃3，它也被忽略。 5）如果你想讓jQuery Validate插件不像submit那樣對待你的<button>，那麼使用type="button屬性。

<button type="button">Choose File</button>

6）由於您的input type="file"元素是隱藏的，你必須告訴jQuery驗證插件不能忽視通過其ignore選項隱藏要素。 Setting this option to [] is enough。

$("#form_import").validate({ 
    ignore: [], // <- don't ignore hidden elements 
    rules: { 
     "file": { 
      required: true 
     } 
    }, 
    // all other rules, options, or callback functions 
})

來源

2014-02-12 23:08:58 Sparky

@ user3290347，如果我的回答幫助你解決了你的問題，那麼請「接受」它或者將它投票......在任何情況下，你都不應該進行編輯，把它全部抹掉並換成感謝信息。這對這個網站是有害的。謝謝。 – Sparky

僅使用提交按鈕啓動驗證

回答

相關問題