在提交時顯示隱藏的div，但表單無效

我正在使用.slideToggle（）隱藏/顯示2個div，它們是同一個表單的一部分。第一部分是用戶信息，第二部分是訂單部分。在提交時顯示隱藏的div，但表單無效

除非用戶具有通過slideToggle隱藏的頂部部分（用戶信息），否則一切都工作得很好，但當它們單擊時，它無效（意味着字段缺少數據或不是正確的數據）提交按鈕只會突出顯示紅色字段，並在瀏覽器右下角（在本例中爲firefox）中顯示一條消息，指出「此字段無效」。但用戶不知道哪個字段是無效的，除非他們點擊div使其再次激活slideToggle。

我試圖讓它如此當用戶點擊提交按鈕，如果表單無效（使用HTML5「所需的」字段或模式），它會顯示隱藏的（通過slideToggle）div所以用戶知道他們的表單沒有經過的原因。

下面是代碼到目前爲止，我已經嘗試過：

$("form").submit(function(){ 
    var testvalue = "Hi!"; 
    alert(testvalue); 
    if (!$(this).valid()) { 
     $("#user_info_div_2").show(); 
     $("#user_info_div_3").show(); 
    } 
});

我也試過：

("#po_form")

這是我的表單的ID，而不是（「形式」），但它沒有什麼不同。

發現的是，此代碼僅在表單有效時才觸發。（警告只是我如何測試以確保代碼正在觸發），這意味着submit（）函數僅在表單實際提交時觸發（這是有道理的）。

我也試過：

$("#po_submit_button").click(function(){ 
    if (!$(this).valid()) { 
     var testvalue = "Not Valid Form"; 
     alert(testvalue); 
    } 
});

這也單擊按鈕時沒有任何影響。

我沒有使用javascript驗證，所以也許這就是爲什麼.valid（）失敗是因爲我沒有正確使用它？

表格很簡單，它只是在某些字段上具有「必需」屬性，其中1個使用了模式屬性來確保狀態只有2個字符。我可以發佈表單的代碼，如果你需要它，但它的設計「簡單」，但不是簡單的書寫（大量的PHP裏面）

有沒有辦法讓它運行一些.show（）代碼如果表格無效？

如果我需要閱讀關於使用JavaScript驗證或甚至jQuery驗證我可以但希望只使用HTML5。我真的很喜歡slideToggle（），讓一點信息一下子出現在屏幕上（看上去很乾淨），但我不能讓提交按鈕不做任何事情，用戶會感到困惑，因爲他們需要填寫的字段不是' t在屏幕上（當前）。

編輯：這裏是一個小提琴

JSFiddle

這是怎麼了我當前的代碼工作。（或不工作）

我想使它如此，如果你有用戶部分不可見和不完整，並且你點擊了訂單部分中的按鈕，用戶部分打開，以便用戶可以看到爲什麼他們的表格沒有正確提交。

來源

2014-09-29 DerekConlon

我在原來的職位加入了小提琴來證明我的代碼是做表單元素上，希望你和其他人可以看到什麼我正在努力。 – DerekConlon 2014-09-29 19:51:07

從我理解的這段代碼。

$("#po_submit_button").click(function(){ 
    if (!$(this).valid()) { 
     var testvalue = "Not Valid Form"; 
     alert(testvalue); 
    } 
});

需要改變，以

$("#po_submit_button").click(function(){ 
    if (!$("#po_form")[0].checkValidity()) { 
     var testvalue = "Not Valid Form"; 
     $("#user_info_div_2").show(); 
    $("#user_info_div_3").show(); 
    } 
});

因爲你的「這」指的是沒有按鈕的形式。

您需要使用的功能checkValidity（），它是一個內置的Javascript FUNC

來源

2014-09-29 15:28:20

我試過這段代碼，它沒有改變任何東西。當我點擊按鈕 – DerekConlon 2014-09-29 19:50:36

沒有新的事發生了一些錯誤，請嘗試新的代碼。同樣在你的jsfiddled中，你已經搞糟了表和div，並且沒有表單關閉。更新它http://jsfiddle.net/6jf0hy17/3/ – 2014-09-29 20:06:12

謝謝你修理我的小提琴。這個答案是現貨。非常感謝。 – DerekConlon 2014-09-29 20:28:33

在提交時顯示隱藏的div，但表單無效

回答

相關問題