Asynchrone Formularübergabe mit petersilie.js

Question

Ich versuche, ein Formular zu erstellen, das Frontend mit Parsley.js validiert und asynchron eingereicht wird. Das Formular heißt #contactForm und die Übergabeschaltfläche ist #sendData. Der Fehler tritt auf, wenn ich auf ein leeres oder ungültiges Formular absende. Ich erwarte eine 'Fehler' Warnung von ungültigen Formulardaten, aber stattdessen geht es einfach weiter mit der Else Bedingung und die Daten werden von contactForm.php verarbeitet.

---

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

---

unter Proper Lösung.

Answer 1

So sollte Ihr Code aussehen.

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

• Sie möchten senden Sie das Formular Ereignis fangen, nicht den Klick auf den Absenden-Button. (Es gibt andere Möglichkeiten zum Senden eines Formulars - wie zum Beispiel das Drücken der Eingabetaste -, die keinen Klick auslösen, aber auch behandelt werden müssen.)
• Sie möchten die Standardaktion immer verhindern. Sie reichen Ihr Formular über Ajax ein, so dass Sie es nie auf die traditionelle Art und Weise einreichen möchten.
• Es besteht keine Notwendigkeit, explizit mit === false zu vergleichen. (Petersilie wird einen truthigen Wert zurückgeben, wenn das Formular gültig ist, verwenden Sie das.)
• $(document).ready(function() { ... ist $(function() { ....
• Setzen Sie sich auf einen Weg, um geschweifte Klammern zu platzieren. (Die gebräuchlichste Konvention in JS ist "asymmetrisch", d. H. { in der Zeile, die die Anweisung gestartet hat.)
• Ihre Kommentare sind überflüssig. (Sie sagen, genau das, was der Code sagt, sie sind also nicht erforderlich.)

---

EDIT: In älteren Versionen von parsely (vor 2.x), verwenden

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

Answer 2

Dies ist, was arbeitete für mich:

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

Ja, es wird von petersiliejs.org Beispielen kopiert. Aber es funktioniert gut!