Question

I use ASP.NET MVC 3 Razor, with jquery validation plugin to build a Registration Form.
So I included this:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

I’ve added the following in my Web.config:

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

My Razor form looks like this:

@model bop.Web.Models.ProfileModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Page title</h2>
@Html.ValidationSummary(true)
@using (Html.BeginForm("Register", "Profile", FormMethod.Post, new { id = "RegForm" }))
{
    <fieldset>
        <div class="editor-label">
            @Html.LabelFor(model => model.companyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.companyName)
            @Html.ValidationMessageFor(model => model.companyName)
        </div>
        <div>
        ... here other input fields ...
        </div>
        <a href="#" id="nextbtn1">GO TO STEP 2</a>
    </fieldset>

At the bottom I have:

<script type="text/javascript">
    $(document).ready(function () {
        $('#nextbtn1').click(function () { // bind click event to link
            $("#RegForm").validate();
            if ($("#RegForm").valid()) {
                var $tabs = $('#tabs').tabs(); // first tab selected
                $tabs.tabs('select', 1); // select second tab
                return false;
            }
        }
    }
</script>

I use bind on the click event because my registration form is splitted across 3 tabs, so I’ll perform a submit in the third step.

The problem is that when I click on “Go to step 2” button I get this error:

Run-time error in Microsoft JScript: Object does not support this property or method 'validate'

Much thanks in advance for helpful pointers.

Answer 1

Before checking if the form is valid, you must first validate it, so insert the following before the line if ($("#RegForm").valid()) {:

$("#RegForm").validate();