javascript validate not working in mvc app

Question

In my MVC4 app, I'm trying to create a client side validator for some textboxes in a form. The form is contained in the Register.cshtml view (this view is automatically created by VS2010 when i make a new MVC4 with formsauthentication project).

The form already implements validation on Submit button, but I want a validator that acts as soon as focus leaves the textbox - should show me an inline error just next to the textbox, with a red font. if it validated ok, it should again show the message 'ok'.

The problem: The .js validator doesn't work. Firebug says:

$document is not defined. $document.ready(

I also tried alert(), if i place it outside the document.ready function, it pops. when inside, it doesnt pop. Code for registerForm.js:

$document.ready(
function () 
{
    $('#registration form').validate
    (
        {
            rules: 
            {
                UserName: { required: true }
            },
            success: function (label) 
            {
                label.Text('OK!').addClass('IsInputValid');
            }
        }
    )
}
);

The bundle that adds this javascript is as follows:

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/registerForm.js",
                    "~/Scripts/jquery.validate*"));

Finally, the view:

<div id="registration">
@using (Html.BeginForm()) {
@Html.ValidationSummary()

<fieldset>
    <legend>Registration Form</legend>
    <ol>
        <li>
            @Html.LabelFor(m => m.UserName)
            @Html.TextBoxFor(m => m.UserName)
        </li>
        <li>
            @Html.LabelFor(m => m.Email) 
            @Html.TextBoxFor(m => m.Email)
        </li>
        <li>
            @Html.LabelFor(m => m.Password)
            @Html.PasswordFor(m => m.Password)
        </li>
        <li>
            @Html.LabelFor(m => m.ConfirmPassword)
            @Html.PasswordFor(m => m.ConfirmPassword)
        </li>
    </ol>
    <input type="submit" value="Register" />
</fieldset>
 }
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

What could prevent the js from working? I've already spent about 5hours trying to figure this out. Please let me know if you have any suggestions,

Regards,

Joe · Accepted Answer · 2012-06-17 17:03:54Z

1

 @Html.TextBoxFor(m => m.UserName, new { @class = "required" })

No need for JS here. And what everyone else is saying about $document not being the correct syntax, unless you have var $document = $(document) defined somewhere.

answered Jun 17, 2012 at 17:03

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amc_rtty Over a year ago

thank you for explaining, no idea how i missed the parenthesis on document keyword. now i'm experimenting with your code to see how i can put the error messages inline instead of a validationSummary. thanks again

Amc_rtty Over a year ago

found what i needed for my initial question (acts as soon as focus leaves the textbox) - blur event.

Ufuk Hacıoğulları · Accepted Answer · 2012-06-17 17:03:25Z

1

You should use jQuery wrapper for document object:

$(document).ready(function () {
    // your function
});

answered Jun 17, 2012 at 17:03

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

Comments

David · Accepted Answer · 2012-06-17 17:03:35Z

1

Is $document defined? jQuery defines a $ object. You can use that object as a function and pass it a selector, including document, and call .ready() on that:

$(document).ready(someFunction);

answered Jun 17, 2012 at 17:03

David

221k42 gold badges245 silver badges337 bronze badges

Collectives™ on Stack Overflow

javascript validate not working in mvc app

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related