通過parsley.js驗證後防止表單提交

我已經使用了parsley.js很多次，並且從我最後一次使用歐芹後直接複製了代碼。通過parsley.js驗證後防止表單提交

但是，每次我提交表單頁面刷新。 preventDefault似乎在我的其他網頁上工作，並停止刷新頁面，但由於某種原因，當我現在嘗試它不會工作。任何人都可以找出爲什麼不呢？

<script> 
    $(function(){ 
     $("#register_signup").submit(function(e){ 
      e.preventDefault(); 
      var form = $(this); 
      if ($('#rform').parsley('isValid')){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script> 

<form id='rform' name='rform' data-parsley-validate> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley('validate');" value='Sign Up' /> 
</form>

來源

2014-09-21 morty

您正在將submit事件綁定到input元素。如果您檢查jquery $.submit() documentation，則表明：

當用戶嘗試提交表單時，將提交事件發送到元素。 它只能附加到<form>元素。可以通過單擊明確的<input type="submit">,<input type="image">或<button type="submit">或通過在某些表單元素具有焦點時按Enter鍵來提交表單。

這是你的主要問題，這就是爲什麼alert永遠不會顯示（實際上，該代碼永遠不會執行）。

我也會改變一些東西：

$('#rform').parsley('validate')應$('#rform').parsley().validate()，假設你使用的香菜2 *
$('#rform').parsley('isValid')應該是$('#rform').parsley().isValid()。使用$.on()代替$.submit()。
從register_signup元素中刪除onClick。由於您已經在使用JavaScript，因此我會直接在JavaScript代碼而不是onclick中執行此操作。這更多的是個人喜好。

所以，你的代碼將是這樣的：

<form id='rform' name='rform'> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" 
     data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" 
     placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" value='Sign Up' /> 
</form> 

<script> 
    $(document).ready(function() { 
     $("#rform").on('submit', function(e){ 
      e.preventDefault(); 
      var form = $(this); 

      form.parsley().validate(); 

      if (form.parsley().isValid()){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script>

來源

2014-09-22 09:54:22

由於您使用javascript驗證表單，因此應從表單中刪除'data-parsley-validate'屬性 – Benny 2016-10-11 07:25:39

使用您的答案代碼來防止提交但不工作。任何建議？ – 2017-05-20 05:02:22

@ankitsuthar，你應該創建一個小提琴併發佈一個新問題。 – 2017-05-20 11:56:55

當您將數據 - 香菜驗證應用於您的表單時，您無需將JavaScript應用於表單即可停止提交，直到所有驗證運行。但是，如果你應用JavaScript返回false時parsely（）無效。只要確保你已經包含parsley.js代碼文件。

來源

2014-09-21 11:47:24

但後來爲什麼它刷新頁面？ – morty 2014-09-21 12:05:13

它不令人耳目一新，它只是提交你的表格。因爲如果表單驗證完成，您需要設置標誌返回true以提交表單，如果不返回false，則執行mot提交表單。 – 2014-09-21 12:22:26

您也可以停止提交 – 2014-09-21 12:24:35

通過parsley.js驗證後防止表單提交

回答

相關問題