Parsley for validation and submit data via ajax

Question

Im testing out the Parsley framework and i must say I really do like how simple it is to implement.

My only issue, is that if i try to attach an ajax submit if the form is validated correctly, it just doesnt seem to catch on.

below is my code.

<form data-validate="parsley" action="reply.html" method="post" id="main-form">
   <input type="text" name="email" data-type="email" data-required="true" /><br />
  <input type="submit" name="submit" />
</form>


<script>
$("#main-form").submit(function(event){
event.preventDefault();
    $.ajax({
           type: "post",
           url: $(this).attr('action'),
           data: $("#main-form").serialize(), // serializes the form's elements.
            dataType : 'json',
           success: function(data)
           {                
            if(data[0].status == 'success')
                {
                alert('its working ok');
                }
           }
         });
});
/* end simple ajax form post */
</script>

all it seems to do, is allow me to validate the form, then post it normally, however im looking for an easy way to simply validate the form and if all is good, submit the data via ajax.

I cant seem to find an easy way of doing this via their help docs... any advice greatly appreciated

Possible duplicate of http://stackoverflow.com/questions/15737455/asynchronous-form-submission-with-parsley-js — Matt Browne, May 27 '13 at 03:07

score 5 · Answer 1 · answered Aug 29 '13 at 06:40

5

You can validate the email using parsely's ajax validation. use data-remote="http://yoururl.com" in your input field, which is to be validated. for example

<input type="text" name="email" data-type="email" data-required="true" data-remote="http://localhost/verify_email.php" />

Note that I've added data-remote="http://localhost/verify_email.php". This will fire an ajax request to the given url.

verify_email.php

// Do some code for verifying email id
if($emailIdExist){ 
    echo json_encode(array("error"=>"Sorry, Email exists. Please try with another one"));
}
else{
    echo true;
}

answered Aug 29 '13 at 06:40

Sajith

2,842
9
37
49

Thanks for the answer. Do you know how to use parsley's custom red messages when there's an error on the input? – Limon May 08 '14 at 15:31
By default, Parsley is using its styles. If you want to write custom styles, override parsley's styles in your style sheet with the help of `!import` – Sajith May 13 '14 at 10:06

score 0 · Answer 2 · answered Apr 28 '14 at 09:43

0

Resolved. If exists answers with 200, so its invalid, if not exists, works with 404, so:

In the external file, you should put if not exists header("HTTP/1.0 404 Not Found");

answered Apr 28 '14 at 09:43

Asier

11
5

This still works? I am returning a 200 if is valid and 404 if not, but neither Parsley keep saying that is invalid – Fernando Montoya Jun 19 '14 at 16:13

Parsley for validation and submit data via ajax

2 Answers2