Question

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&nbsp;:&nbsp;</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&nbsp;:&nbsp;<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?

Answer 1

You second sample is missing closing quotes after the class names.