I am having a problem using client side validation in combination with Data Annotations. The project is using ASP.NET Framework 4.5, a Web Application with the MVP pattern and jQuery Ajax calls to dynamically load user controls.
This is the (stripped) user control which contains the input element that needs to be validated:
<form id="insertArtist" class="form-horizontal">
<fieldset>
<legend>Add new artist</legend>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<asp:TextBox runat="server" ID="name" ClientIDMode="Static" CssClass="input-medium"></asp:TextBox>
<ml:DataAnnotationValidator runat="server" ID="davName" ControlToValidate="name" EnableClientScript="true" PropertyToValidate="Name" SourceTypeName="Music.Library.Domain.Models.Artist, Music.Library.Domain">
</ml:DataAnnotationValidator>
</div>
<div class="form-actions">
<button id="save" class="btn btn-primary" name="submit" type="submit">Save</button>
<button id="cancel" class="btn">Cancel</button>
</div>
</div>
</form>
This user control get's dynamically loaded using the following ajax call:
$('#add').click(function () {
$.ajax({
url: "/Artist/Manage/Insert.ascx.axd",
type: "POST",
dataType: "html",
success: function (obj) {
$('#body_artist').html($(obj));
}
});
});
This is the jquery executed when a user clicks save:
$('#save').click(function (event) {
event.preventDefault();
$.ajax({
url: "/artist/add.axd",
type: "POST",
dataType: "html",
cache: false,
async: true,
data: 'Ajax=true&' + $('#insertArtist').serialize(),
beforeSend: function (jqXHR, settings) {
$('#loading').show();
},
success: function (data) {
if (data == "succes") {
showNotification('succes', 'Succesfully added artist');
} else {
showNotification('error', 'Error while adding artist: ' + data);
}
},
error: function (jqXHR, textStatus, errorThrown) {
showNotification('error', 'Error while adding artist: ' + data);
},
complete: function () {
$('#loading').hide();
}
});
});
Now, since there is no trigger from an asp.net control the custom data annotation validator will not validate.
I've tried validating using Javascript, using the Page_ClientValidate(), ValidateEnable() and Validate() methods. Unfortunately when trying this I keep getting the same error over and over:
Page_ClientValidate is not defined
Same story for the other methods. I'm at wits end here.
Is it because the UserControl is dynamically loaded that these client validation methods do not work? I've set EnableClientScript to true.
Or does anyone have another idea on how to implement this? I'd really like to use the Data Annotations.
Thanks in advance!
