I have a form which I am submitting, the form validation errors appear briefly but the form also posts back to the server. I'm not sure what I have got wrong in my code.
Its a simple submit click so nothing fancy there. The code it is calling is and I just cannot get it to stop the form submission process.
<script type="text/javascript">
jQuery(document).ready(function(){
$('#error-container').hide();
jQuery("form").validate({
invalidHandler: function(form, validator) {
$("#error-container").show();
},
unhighlight: function(element, errorClass) {
if (this.numberOfInvalids() == 0) {
$("#error-container").hide();
}
},
errorLabelContainer: $("ul", $('#error-container')),
wrapper: 'li',
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true,
minlength: 6
},
comment: {
required: true,
minlength: 20
}
},
messages: {
name: {
required: "Please add your name",
minlength: "Your name must be at least 2 characters"
},
email: {
required: "Please add your email",
minLength: "Please add a valid email address",
},
comment: {
required: "Please add a comment",
minLength: "Your comment must be at least 20 characters",
},
},
submitHandler: function(form) {
jQuery("#commentform").hide();
jQuery("#commentLoading").show();
jQuery("#commentform #submit").attr("enabled", false);
var url = "/base/Blog4Umbraco/CreateComment/<umbraco:Item field="pageID" runat="server"/>.aspx";
jQuery.post(url, { author: jQuery("#commentform #author").val(), email: jQuery("#commentform #email").val(), url: jQuery("#commentform #url").val(), comment: jQuery("#commentform #comment").val() },
function(data){
jQuery("#commentLoading").hide();
jQuery("#commentPosted").show().removeClass("error");
if(data == 0){
jQuery("#commentPosted").addClass("error").html(" <%= Umlaut.Umb.Blog.BlogLibrary.Dictionary("#CommentFailend","Your comment could not be posted, we're very sorry for the inconvenience") %> ");
jQuery("#commentform").show();
jQuery("#commentform #submit").attr("enabled", true);
}
});
}
});
});
</script>