異步表單提交與parsley.js

我試圖創建一個使用Parsley.js驗證前端和異步提交一個表單。該表單稱爲#contactForm，提交按鈕爲#sendData，當我點擊空或無效表單提交時出現錯誤。我期望看到來自無效表單數據的「錯誤」警報，但它只是繼續使用Else條件，並且數據由contactForm.php處理。異步表單提交與parsley.js

$(document).ready(function() { 

    // submit data on click and check if valid 
    $('#sendData').click(function(e) { 
     //check if valid with parsley 
     var valid = $('#contactForm').parsley ('validate'); 
     if (valid === false) 
     { 
      e.preventDefault(); 
     } 
     else 
     { 
      $.post("contactForm.php", $("#contactForm").serialize());  
     } 
    }); 
});

下面適當的解決方案。

來源

2013-04-01 nobody

如果驗證結果是布爾值，那麼您的條件應該是'if（！valid）'或'if（valid === false）'。另外，考慮在你的點擊處理程序中添加一個參數'e'並執行'e.preventDefault（）;'而不是返回'false'來取消事件。 – plalx

他們還規定對[他們的網站（http://parsleyjs.org/documentation.html#parsleyform），您必須從表單中刪除'數據驗證=「香菜」'屬性來覆蓋默認處理。 – plalx

感謝您的意見@plalx我從表單屬性移除數據驗證=「香菜」和校正布爾條件。出於某種原因，我仍然有同樣的問題。 AH-忘了我。我誤解了你的評論並解決了它。再次感謝。 – nobody

以下是您的代碼的外觀。

$(function() { 
    $('#contactForm').submit(function(e) { 
     e.preventDefault(); 
     if ($(this).parsley().isValid()) { 
      $.post("contactForm.php", $(this).serialize());  
     } 
    }); 
});

你想趕上表單提交事件，而不是提交按鈕的點擊。（還有其他提交表單的方式 - 如按Enter鍵 - 不會觸發點擊，但必須處理。）
您總是希望防止默認操作。你通過Ajax提交你的表單，所以你實際上從不想用傳統的方式提交表單。
沒有必要比較=== false明確。（歐芹會在表格有效時返回一個真值，只是使用該值。）
$(document).ready(function() { ...是$(function() { ...。
定居在一個方式來放置大括號內。（JS中最常見的約定是「不對稱」，即開始聲明的一行上的{）。
您的評論是多餘的。（他們說的代碼說什麼，所以他們不需要。）

編輯：在舊版本歐芹（2.X之前），使用

if ($(this).parsley('validate')) { 
    // ... 
}

來源

2013-04-01 07:09:46 Tomalak

感謝您的這位先生！ – CaffeineShots

非常有幫助的答案 - 代碼和筆記。謝謝 –

不幸的是歐芹（'validate'）在歐芹中不可用2.x –

這是什麼工作對我來說：

<form id="signupform" data-parsley-validate> 
    (....) 
</form> 

<script> 
$(function() { 
    $('#signupform').parsley().subscribe('parsley:form:validate', function (formInstance) { 
     formInstance.submitEvent.preventDefault(); //stops normal form submit 
     if (formInstance.isValid() == true) { // check if form valid or not 
      //code for ajax event here 
      $.post("createuser.php", $(#signupform).serialize()); 
    }}); 
}); 
</script>

是的，它是從parsleyjs.org例子複製。但它工作正常！

來源

2014-06-28 08:29:15 reenleedr

異步表單提交與parsley.js

回答

相關問題