I have an ajax save function that works when I call it using knockoutJS click event. I am trying to used jquery validation however, and when I call the function from the submitHandler: it fails to call the function. My save() is undefined. I am a newb to jquery and javascript in general. Can someone help me fix the problem? I need to save after validation. Code below:
$( "form" ).validate({
submitHandler: function () {
FamiliesViewModel.save();
},
rules: {
FamilyName: {
required: true
},
FamilyPhone: {
required: true ,
number: true
},
FamilyEmail: {
required: true
},
StreetAddress: {
required: true
},
AptOrUnit: {
maxlength: 10
},
City: {
required: true
},
ZipCode: {
required: true ,
maxlength: 10,
number: true
},
FirstName: {
required: true
},
LastName: {
required: true
},
Gender: {
required: true
},
Birthdate: {
required: true ,
},
FamilyRole: {
required: true
},
RelationshipType: {
required: true
}
},
messages: {
FamilyName: {
required: "You must provide a family name. Format suggested: Family, Mom and Dad."
},
FamilyPhone: {
required: "You must provide us with at least 1 phone number." ,
number: "You must use numbers only in the phone number."
},
FamilyEmail: {
required: "Please provide an email address."
},
Birthdate: {
required: "You must provide a birthdate." ,
date: true
}
}
});
FamiliesViewModel
=
function (data) {
var self = this ;
ko.mapping.fromJS(data, individualsMapping, self);
self.save = function () {
$.ajax({
url: "/Families/Save" ,
type: "POST" ,
data: ko.toJSON(self),
contentType: "application/json" ,
success: function (data) {
if (data.familiesViewModel != null )
ko.mapping.fromJS(data.familiesViewModel, {}, self);
if (data.newLocation != null )
window.location = data.newLocation;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (XMLHttpRequest.status == 400) {
$( "#MessageToClient" ).text(XMLHttpRequest.responseText);
} else {
$( "#MessageToClient" ).text( "The web server had an error." );
}
}
});