asp.net mvc's Html.BeginForm() seems to work with jquery validation plugin but the validation plugin doesn't seem to work with a form which i ve added to a page....
This works,
<% using (Html.BeginForm("Login", "Registration", FormMethod.Post, new { id = "Loginform" })) {%>
<fieldset>
<legend>Login</legend>
<p>
<label for="EmailId">EmailId:</label>
<%= Html.TextBox("EmailId", null, new { @class = "text_box_height_14_width_150" })%>
</p>
<div class="status"></div>
<p>
<label for="
Password">Password:</label>
<%= Html.Password("
Password",null, new { @class = "text_box_height_14_width_150" }) %>
</p>
<div class="status"></div>
<p>
<input type="submit" value="Login" id="login" />
</p>
</fieldset>
<% } %>
But this doesn't work,
<form id="Loginform" method="post" action="Registration/Login">
<table cellpadding="0" cellspacing="0" width="100%" style="border:none;">
<tr>
<td width="12%">Email Id : </td><td width="15%">
<input id="EmailId" type="text" class="text_box_height_14_width_150
name="EmailId" /></td><td width="20%" class="status"></td>
<td width="12%">Password : <td width="15%"><input id="
Password"
type="
password" class="text_box_height_14_width_150 name="
Password" /></td>
<td width="20%" class="status"></td>
<td width="5%"><input type="submit" value="Login" id="BtnLogin" /></td>
</tr>
</table>
</form>
and my jquery function has this,
$(document).ready(function() {
var validator = $("#Loginform").validate({
rules: {
EmailId: "required",
Password: {
required: true,
minlength: 6
}
},
messages: {
EmailId: "Enter your EMail ID",
Password: {
required: "Please Provide a
password",
rangelength: jQuery.format("Enter at least {0} characters")
}
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
Any suggestion... Am i missing something?
