Problem with jQuery Validation Plugin & Form Plugin
helo guys!
I got a problem with using a combination of jquery validation plugin and form plugin. the weird thing i'm confronted with is the following:
for the submitHandler I use a animated success message. but this message only shows up if I previously try to submit the form without filling out the required fields and so provoke a error message. if I fill out the form correctly on first try the message isn't shown. it seems like i first have to provoke an error message before the success message is activated. i hope you guys understand what i'm trying to say. i hope anybody can solve this mystery for me and maybe this code is helpful for analysing:
$(document).ready(function() {
var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>')
.css({position: "absolute", top: "435px", left: "155px"})
.appendTo("contactform")
.hide();
jQuery().ajaxStart(function() {
loader.show();
}).ajaxStop(function() {
loader.hide();
}).ajaxError(function(a, b, e) {
throw e;
});
var v = jQuery("#contact").validate({
rules: {
anrede: "required",
name: "required",
strasse: "required",
ort: "required",
telefon: {
required: true,
digits: true
},
nachricht: "required",
email: {
required: true,
email: true
},
},
messages: {
anrede: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
name: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
strasse: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
ort: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
telefon: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
nachricht: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>"),
email: ("<p>Bitte füllen Sie alle Felder korrekt aus!</p>")
},
//errorLabelContainer: "#output",
//wrapper: "li",
errorElement: "div",
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "div.error",
success: function() {
$('#contactform').html("<div id='message'></div>");
$('#message').html("<h2>Nachricht erfolgreich gesendet!</h2>")
.hide()
.fadeIn(1500)
.fadeOut(3000, function() {
$('#message').html("<p>Wir werden uns bald mit<br>Ihnen in Kontakt setzen.</p>")
.fadeIn(2000)
})
},
clearForm: true,
resetForm: true
});
}
});
//jQuery("#reset").click(function() {
//v.resetForm();
//});
});