ajax - jQuery Validate - cannot submit form successfully more than once -

ajax - jQuery Validate - cannot submit form successfully more than once -

i trying redo email contact form using jquery validate plugin , ajax within submithandler. found works, however, works once. after seek resubmit form, no longer receive emails. need manually refresh page in order form resubmit successfully. know issue?

here's code:

<form class="form ajax" id="contact_form" method="post" action="php/contact.php"> <div id="response" class="response"> <h2>thank you! message has been sent.</h2> </div> <p class="name"> <label for="name">name</label> <input type="text" name="name" id="name" placeholder="your name" autocomplete="off" /> </p> <p class="email"> <label for="email">email</label> <input type="text" name="email" id="email" placeholder="mail@example.com" autocomplete="off" /> </p> <p class="subject"> <label for="subject">subject</label> <input type="text" name="subject" id="subject" placeholder="your subject" autocomplete="off" /> </p> <p class="message"> <label for="message">message</label> <textarea name="message" placeholder="your message" id="message"></textarea> </p> <p class="submit"> <input class="submit-button" type="submit" id="submit" value="send" /> </p> </form>

$(document).ready(function() { $.validator.setdefaults({ errorclass: 'form_error', errorelement: 'div' }) $("#contact_form").validate({ rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, subject: { required: true, minlength: 2 }, message: { required: true, minlength: 10 } }, messages: { name: { required: "please come in name", minlength: "your name seems bit short doesn't it?" }, email: { required: "please come in email address", email: "please come in valid email address" }, subject: { required: "please come in subject", minlength: "your subject seems bit short doesn't it?" }, message: { required: "please come in message", minlength: "your message should @ to the lowest degree 10 characters" } }, submithandler: function(form) { var = $(form), url = that.attr('action'), type = that.attr('method'), info = {}; that.find('[name]').each(function(index, value) { var = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { $('#name').val(''); $('#email').val(''); $('#subject').val(''); $('#message').val(''); $('#response').fadein(300, function () { $('#response').delay(5000).fadeout(300); }); } }); homecoming false; } });

edit: since posting answer, op updated question reflect suggestions. code working far can tested: http://jsfiddle.net/zrd8y/1/

my original reply follows...

you 1have not shown plenty code certainty what's going wrong. need show a complete working example including html , rest of .validate() method.

however, bit of code unusual , big factor in issue:

success: function(element) { element.remove(); }

how can form when every element permanently removed dom upon successful validation of each input?

quote op:

"i need manually refresh page in order form resubmit successfully."

the way restore removed dom using the .remove() method reload page.

according the documentation success callback:

success type: string or function() if specified, error label displayed show valid element. if string given, added class label. if function given, called label (as jquery object) , validated input (as dom element). label can used add together text “ok!”.

in other words, success callback meant means display label element on valid form element, instead of only on invalid element. usage remove element dom not appropriate here. since you're removing input elements, not understand how form can sending info @ all, first time.

as start, seek eliminating success callback alternative entirely.

notes:

your code...

submithandler: function(form) { var = $("#contact_form"), url = that.attr('action'), ....

fyi, form argument provided you, , represents your form. in other words, form represents $("#contact_form"). can utilize $(form) instead...

submithandler: function(form) { url = $(form).attr('action'), ....

jquery ajax forms jquery-validate