jQuery - 表單在alertify收到確認框值之前提交（使用HTML5）

我有一個包含2個字段的表單，其中一個是必需的。我使用HTML5 要求的屬性來檢查提交期間字段是否填滿。jQuery - 表單在alertify收到確認框值之前提交（使用HTML5）

<form id ='reg' name='reg' action='here.php' method='post'> 
    <input type='text' id='name' name='name' placeholder='Name' value='' required="true" /> 
    <input type='text' id='contactno' name='contactno' placeholder='Contact No' value='' /> 
    <input type='submit' value='Register' name='register' id='register' /> 
</form>

的形式實際上提交之前，我想說明一個確認框（使用alertify jQuery插件），以提示提交給用戶。如果用戶點擊確定，表單應該提交。否則，它不應該。我用這個代碼的確認框檢查一次提交事件觸發：

$("#reg").submit(function() 
{ 
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    { 
     if (e) { 
      // user clicked "ok" 
      alertify.success("You've confirmed your reservation."); 
      return true; 
     } else { 
      // user clicked "cancel" 
      alertify.error("You did not confirm your reservation."); 
      return false; 
     } 
    }); 
});

問題是，形式不等待用戶的回答，並立即提交。我嘗試了建議here，這在起初似乎很好。我取代HTML按鈕類型的「按鈕」和替換jQuery代碼這樣：

$("#register").click(function() 
{ 
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    { 
     if (e) { 
      // user clicked "ok" 
      alertify.success("You've confirmed your reservation."); 
      $("#reg").submit(); 
      return true; 
     } else { 
      // user clicked "cancel" 
      alertify.error("You did not confirm your reservation."); 
      return false; 
     } 
    }); 
});

與這一個問題是，我有一個需要=「真」的屬性的字段中的一個，這應該防止如果該字段爲空，則提交表單。如果用戶在確認框中單擊確定，即使所需字段仍爲空，上面的代碼也允許提交。

我想先檢查該字段是否在顯示對話框之前填滿，然後等待用戶的答案，然後決定是否提交。有關我如何能夠實現這一目標的任何建議？提前致謝！ :)

來源

2013-08-20 galibee

阻止提交總是，然後手動提交表單上單擊確定。

$("#reg").submit(function(event){ 
    event.preventDefault(); // cancel submit 
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) { 
     if (e) { 
      // user clicked "ok" 
      alertify.success("You've confirmed your reservation."); 
      $("#reg")[0].submit(); // submit form skipping jQuery bound handler 
     } else { 
      // user clicked "cancel" 
      alertify.error("You did not confirm your reservation."); 
     } 
    }); 
});

也改爲一個提交事件，而不是點擊因爲這是真正你想要的東西，否則所需的屬性是沒用的。

您很少需要在提交按鈕上使用點擊事件。只要綁定到表單的提交事件。

來源

2013-08-20 17:42:16

非常感謝！正是我需要的。 – galibee

抱歉疏浚了這個......但我試過這個，我沒有得到提交的表單，如果按下「確定」按鈕。我嘗試了使用和不使用'[0]'，並且甚至在'$（「＃reg」）[0] .submit（）;行後面推了另一個'event.preventDefault（）;'。其他一切都在工作，它只是不會提交表單並重定向到'action =「whatever.php」'頁面來處理處理。 – Abela

如果你可以製作一個小提琴來展示這個問題，我會在早上看看它。 –

我修改了上面的例子來減少樣板。不再需要覆蓋邊界檢查。只需將事件和消息傳遞給generic（）方法即可。

$(document).ready(function() { 

    function confirm(event, msg) { 
     var evt = event; 
     event.preventDefault(); 
     alertify.confirm(msg, function (e) { 
      if (e) { 
       evt.currentTarget.submit(); 
       return true; 
      } else { 
       return false; 
      } 
     }); 
    } 

    $("#deleteApplianceForm").submit(function(event){ 
     confirm(event, "Are you sure you want to delete this appliance?"); 
    }); 
});

來源

2014-04-10 15:43:59 bitstream

jQuery - 表單在alertify收到確認框值之前提交（使用HTML5）

回答

相關問題