[jQuery] Modal dialog validation problem
I have a form in a modal dialog which I submit with $.post().
Validation is set so that the name field has a min length of 2.
* enter 'a' in name and submit
* validation works, form not submitted, error displayed
* submit again (still with 'a' for name)
* validation fails, form gets submitted and record is created with
invalid name ('a' - too short)
Any ideas why validation is not being called the second time?
function addNewPlace(parentID, heading, placeType, fade, remove,
backup){
$("#addPlace").remove(); // remove any previous forms
$.get("http://localhost:8000/places/add-place",
{parent:parentID},function(data){
$(data).dialog({modal:true, resizable:false, draggable:false,
title:heading, width: 400});
$("#id_type").val(placeType);
$("form#addPlace").submit(function(){
placeName = $("form#addPlace #id_name").val();
$.post("/places/add-place", $("#addPlace").serialize(),
function(){
$("#addPlace").dialog('close');
updateSelect(parentID, fade, remove, backup, placeName)
});
return false;
});
$("#addPlace").validate({
rules: {
name: {
required: true,
minlength: 2
},
},
errorElement: "p",
errorClass: "errorField",
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
},
highlight: function(element, errorClass) {
$(element).parent().addClass('error');
},
unhighlight: function(element, errorClass) {
$(element).parent().removeClass('error');
},
});
});
}