用於多表單頁面的表單選擇器

我已經有了一個包含六個表單的頁面。我使用jQuery 2.02，JQM 1.3.1以及jQuery Validate 1.12.0和附加方法附加組件來嘗試驗證表單。我試圖用這個選擇來獲取相關的形式，當用戶點擊提交按鈕：用於多表單頁面的表單選擇器

$('[id^=formEvent_]').validate({

這在HTML中遇到的第一種形式的偉大工程......（formEvent_assign，見下文小提琴）換句話說，無論用戶實際使用哪種形式，它總是選擇第一種形式。

我已經試過

$('[id^=formEvent_]').closest('form').validate({

設置的形式，例如一個變量：

var formPointer = "formEvent_terminate"; 
$('#' + formPointer).validate({

還有：

var formPointer = "#formEvent_terminate"; 
$(formPointer).validate({

其中沒有工作，還有幾個我發現的其他事情。我一直在掙扎幾個小時，這似乎是一件簡單的事情。我可以在console.log中看到正確的表單對象正在創建，並且我可以看到它是兒童（所有輸入）等，但選擇器不允許驗證運行。

我應該使用什麼樣的選擇器，以便我可以從各個窗體中的提交按鈕正確運行驗證？

這裏是我讀過，並試圖看似相關的SO問題的清單，但最終沒有能夠得到一個原因或其他工作：

Jquery validating a specific form on a page with multiple forms

this input submit selector with closest form submit

Javascript/jQuery: Why different result for event.target using tag Vs. other Elements in console.log, alert() with $(this) in mind

下面是完整的驗證代碼&如果表單有效，調用提交例程：

$('[id^=formEvent_]').validate({ 
    submitHandler: function (form, event) { 
     isFormValid(form, event); 
    }, 
    rules: { 
     pcbid_assign: { 
      required: true, 
      digits: true, 
      rangelength: [3, 6] 
     }, 
     pcbid_terminate: { 
      required: true, 
      digits: true, 
      rangelength: [3, 6] 
     }, 
     input_reason_terminate: { 
      required: true 
     }, 
     input_assign_sbeJobNumber: { 
      require_from_group: [1, ".assign_group"] 
     }, 
     input_assign_sbeModelNumber: { 
      require_from_group: [1, ".assign_group"] 
     }, 
     input_assign_sbePN: { 
      require_from_group: [1, ".assign_group"] 
     }, 
     input_assign_sbeSerialNumber: { 
      require_from_group: [1, ".assign_group"] 
     } 
    }, 
    messages: { 
     pcbid_assign: "Please enter a valid PCBID with 3-6 digits.", 
     input_assign_sbeJobNumber: "Please enter a valid job number.", 
     input_assign_sbeModelNumber: "Please enter a valid model number.", 
     input_assign_sbePN: "Please enter a valid part number.", 
     input_assign_sbeSerialNumber: "Please enter a valid serial number.", 
     pcbid_terminate: "Please enter a valid PCBID with 3-6 digits.", 
     input_reason_terminate: "Please enter a reason for this PCBID board's termination." 
    } 
});

這裏有一些小提琴的表現出預期的行爲（因爲他們只有在每一個表單）：

Assign with validation

Terminate with validation

來源

2014-05-20 delliottg

您是試圖一次驗證所有表單還是隻是「活動」表單？ – scunliffe

只是活動的形式。我正在構建一個通過AJAX發送到ASP的通用JS對象。用於進一步處理（更新，查詢或插入MySQL數據庫）的.NET代碼隱藏頁面。總是會發送相同的對象，只是數據會因提交的表單而異。 – delliottg

你試過.each()方法嗎？類似$('[id^=formEvent_]').each(function() { $(this).validate({....

來源

2014-05-20 22:31:03 kosmos

今天我能夠可靠地工作，感謝您的建議。我會發布我的最終代碼的工作小提琴（仍然工作的細微差別進行驗證）。再次感謝 – delliottg

如果提交按鈕裏面你可以使用這個簡單的「香草」JavaScript的形式。

<input type="submit" value="Submit" onclick="$(this.form).validate();"/>

this.form將始終爲您提供包含表單。

來源

2014-05-20 22:24:51 scunliffe

這也可以在JS文件中完成？或者我需要在HTML中添加整個驗證功能嗎？我會試着寫下來看看會發生什麼。 – delliottg

你可以在提交按鈕中調用任何你想要的東西，甚至只是'doStuff（this）;'或'doStuff（this.form）;'同樣你也可以將它與jQuery綁定。 – scunliffe

感謝您的幫助，我決定去下面的@ kmsdev的答案，因爲它在我的情況下工作得很好，但您的看起來也非常可行。 – delliottg

用於多表單頁面的表單選擇器

回答

相關問題