Przesyłanie formularzy asynchronicznych za pomocą parsley.js

Question

Próbuję utworzyć formularz, który jest sprawdzany przez interfejs Parsley.js i przesłany asynchronicznie. Formularz nazywa się #contactForm, a przycisk przesyłania to #sendData, błąd pojawia się, gdy kliknę przycisk Wyślij w pustej lub nieprawidłowej formie. Oczekuję wyświetlenia alertu "Błąd" z nieprawidłowych danych formularza, ale zamiast tego po prostu kontynuuje się stan Else, a dane są przetwarzane przez 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());  
     } 
    }); 
}); 

---

odpowiedniego rozwiązania poniżej.

Answer 1

Oto jak powinien wyglądać twój kod.

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

• chcesz złapać zdarzenie forma przedstawienia, a nie kliknij na przycisk Wyślij. (Istnieją inne sposoby przesłania formularza, np. Naciśnięcie klawisza Enter, które nie spowoduje kliknięcia, ale również musi być obsługiwane.)
• Zawsze chcesz zapobiec domyślnej akcji. Przesyłasz swój formularz przez Ajax, więc nigdy nie chcesz go przesyłać w tradycyjny sposób.
• Nie ma potrzeby porównywania z === false jawnie. (Pietruszka zwróci wartość truey, gdy formularz jest prawidłowy, po prostu użyj tego.)
• $(document).ready(function() { ... to $(function() { ....
• Osadzić w jeden sposób, aby umieścić nawiasy klamrowe. (Najbardziej popularna konwencja w JS jest "asymetryczna", tj. { w jednej linii, która rozpoczęła wyciąg).
• Twoje komentarze są zbędne. (Mówią dokładnie to, co mówi kod, więc nie są one potrzebne.)

---

EDIT: W starszych wersjach parsely (przed 2.x), użyj

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

Answer 2

to co pracował dla mnie:

<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> 

Tak, jest kopiowany z przykładów parsleyjs.org. Ale działa dobrze!