parsley.jsを使用した非同期フォームの提出

Question

私は、Parsley.jsを使用してフロントエンドを検証し、非同期で提出するフォームを作成しようとしています。フォームは#contactFormと呼ばれ、送信ボタンは#sendDataです。空または無効なフォームでsubmitを押すとエラーになります。無効なフォームデータから「エラー」アラートが表示されることが予想されますが、代わりにElse条件が続き、データはcontactForm.phpによって処理されます。

---

$(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());  
     } 
    }); 
}); 

---

以下の適切なソリューションを提供します。

Answer 1

コードは次のようになります。

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

• は、フォーム提出イベント、送信ボタンのないクリックをキャッチしたいです。 （フォームを送信するには、フォームを送信する他の方法があります。これは、クリックを引き起こすことはありませんが、同様に処理する必要があります）。
• デフォルトアクションを常に防止します。フォームをAjax経由で提出するので、伝統的な方法で提出することは決してありません。
• === falseと明示的に比較する必要はありません。 （フォームが有効な場合、パースリーは真偽値を返します。それを使用してください）
• $(document).ready(function() { ...は$(function() { ...です。
• 中括弧を配置する一方向に整定します。 （JSの最も一般的な規約は、「非対称」です。つまり、文を開始した1行に{）です。
• あなたのコメントは余分です。 （彼らが必要とされていないので、コードは、言うまさに言う。）

---

EDIT：（2.xの前）パセリの古いバージョンでは、これは何である

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

Answer 2

を使用します私のために働いた：

<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の例からコピーされます。しかし、それは正常に動作します！