I am putting together a contact form inside of a partial view and I've been trying to apply jquery validation to it. However, no matter what I've searched for and tried, it fails to trigger. There are no errors, which makes it substantially harder to resolve. The css applied here is entirely bootstrap. The validation js file is being called before the jquery js file (some people have asked that in other forums).
Here's my partial view:
<form id="contact-form" class="container-padding">
<div class="form-group">
@Html.LabelFor(model => model.Name, "Full Name", new { @class = "control-label", @for = "name" })
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @placeholder = "Name", @size = 40, @class = "form-control", @id = "name", @name = "name", @type = "text" } })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, "Email Address", new { @class = "control-label", @for = "email" })
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @placeholder = "Email", @size = 40, @class = "form-control", @id = "email", @name = "email", @type = "email" } })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Subject, "Subject", new { @class = "control-label", @for = "subject" })
@Html.EditorFor(model => model.Subject, new { htmlAttributes = new { @placeholder = "Subject", @size = 40, @class = "form-control", @id = "subject", @name = "subject", @type = "text" } })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Message, "Message", new { @class = "control-label", @for = "message" })
@Html.EditorFor(model => model.Message, new { htmlAttributes = new { @placeholder = "Message", @rows = 10, @class = "form-control", @id = "message", @name = "message", @type = "text" } })
</div>
<input type="reset" class="btn btn-lg btn-primary pull-left" value="Clear" />
<button type="submit" class="btn btn-lg btn-primary pull-right" onclick="">Send</button>
<img class="ajax-loader" src="~/Content/images/icons/ajax-loader.gif" alt="Sending..." onload="this.width /= 2;" />
</form>
My javascript:
$(document).ready(function () {
//I found this frequently, but made no change whatsoever.
$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($('form'));
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
subject: {
minlength: 2,
required: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function (element) {
alert('highlight');
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name must be at least 2 character long"
}
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.form-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
onkeyup: false,
submitHandler: function (form) {
alert('it works!');
return false;
}
});
});
I guess my goal in posting this is to get outside eyes to look at it. I'm going to continue looking it over, but I have yet to uncover anything and I'd really like some help at this point.
Thanks for taking the time to read this.
