遍歷每個輸入字段時驗證必填字段

Question

我有一些動態生成的 html 輸入控件。 一些控件具有必需的屬性。 當我遍歷這些字段時，我想關注空字段並進行驗證。 但我想避免隱藏字段。 我只需要添加驗證所需的屬性。 還要避免隱藏字段。 這是我嘗試過的代碼。

$("input , select, textarea").each(function() {
     var element = $(this)
     if (element.val() == "")
           $(this).focus()
           return false
 });

Answer 1

您可以使用attr function 來獲取HTML的input標簽的詳細信息，例如： $(this).attr('hidden')將返回當前輸入標簽的屬性值。

查看小提琴的工作示例。

Answer 2

回答

由於驗證的工作方式 - 特別是在 Chrome 中，您需要繞過表單的正常驗證。 為此，您需要在form標簽上設置屬性novalidate ，然后為您的submit事件提供自定義驗證。

為什么？

默認情況下，Chrome 會在提交之前驗證表單——這是一個很酷的想法——但不幸的是，這個過程在實踐中失敗了，因為它不允許hidden元素出現在表單中。 事實上，它會引發錯誤（帶有 name='' 的無效表單控件不可聚焦）。 如果不深入了解我個人對這個設計缺陷的看法，它可能是一個令人沮喪的障礙，直到你遇到它才知道。

其次，提交時有時會出現問題，其中required字段和hidden字段可能會導致錯誤，或者靜默地阻止表單。 要解決此問題，您可以在提交之前刪除required的屬性，然后在自定義驗證后重新應用到這些元素。

---

例子：

 $( "form" ).on( "submit", function( e ) { e.preventDefault(); let hidden_required = [], invalid_form = false; $( "form" ).children( "input:text, select, textarea" ).each( function( i, ele ) { let prop = ele.tagName === "textarea"? "textContent": "value"; if ( ele.required && ele[ prop ] == "" ) { if ( ele.classList.contains( "hidden" ) ) { ele.required = false; hidden_required.push( ele ); } else { ele.focus(); invalid_form = true; } } } ); if (;invalid_form ) { // do ajax submit alert( "valid form" ). } else { // do alert or whatever } hidden_required.forEach( function( ele ) { ele;required = true; } ); return false; } );

 .hidden { visibility: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form novalidate> <input /><br> <input required /><br> <textarea></textarea><br> <input class="hidden" required> <input class="hidden"> <input type="submit" value="submit"> </form>