Javascript validation in form

Question

I have tried to figure this out for ages. The JavaScript gets called but it doesn't invoke the error message. It always shows up as no error even though it should invoke an error message. All the fields shows up as green.

I am pretty new at this so tried googling as much as I can. I apologize in advance for the ghetto code styling at some places :)

@section footer{
Javascript:

    <script type="text/javascript">
        $("document").ready(function ()
        {
            $("#form-manage").validate({

                rules: {
                    passwordNow: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 3,
                        maxlength: 20
                    },
                    passwordConfirm: {
                        required: true,
                        minlength: 3,
                        maxlength: 20,
                        equalTo: '#password'
                    },
                },

                messages: {
                    passwordNow: {
                        required: 'Vennligst tast inn ditt nåværende passord'
                    },
                    password: {
                        required: 'Vennligst velg et nytt passord'
                    },
                    passwordConfirm: {
                        required: 'Vennligst bekreft det nye passordet',
                        equalTo: 'Passordene stemmer ikke'
                    },
                },

                submitHandler: function (form) {
                    $(form).ajaxSubmit({
                        success: function () {
                            $("#form-manage").addClass('submited');
                        }
                    });
                },

                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                }
            });
        });
    </script>
}

Form which is inside a partial:

<div class="col-md-12">
<p class="text-success">@ViewBag.StatusMessage</p>
@if (ViewBag.HasLocalPassword){
  @Html.Partial("_ChangePasswordPartial")
}
else{
  @Html.Partial("_SetPasswordPartial")
}
</div>

and here is the form:

@using (Html.BeginForm("Manage", "Account", FormMethod.Post, new { @class = "smart-form", id = "form-manage", role = "form" }))
{

    @Html.AntiForgeryToken()
    <text>
    <fieldset>
        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                    @Html.PasswordFor(m => m.OldPassword, new { @class = "input", placeholder = "Nåværende passord", name = "passwordNow", style = "height:34px;" })
                <span class="icon-prepend fa fa-lock"></span>
            </label> 
        </section>

        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                @Html.PasswordFor(m => m.NewPassword, new { @class = "input", placeholder = "Nytt passord", name = "password", style = "height:34px;" })
                <span class="icon-prepend fa fa-lock"></span>
            </label>
        </section>

        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "input", placeholder = "Bekreft passord", name = "passwordConfirm", style="height:34px;" })
                <span class="icon-prepend fa fa-lock"></span>
            </label>
        </section>
    </fieldset>

    <footer>
        <div class="col-xs-5 col-sm-7 col-md-6" style="padding-left:28px">
            @Html.ValidationSummary()
        </div>
        <input type="submit" value="Lagre endringer" class="btn btn-default" />
    </footer>
</text>
}

Everything works (amazingly) except that the error messages doesn't show if I f.ex doesn't fill a field. The required length doesn't work either. Still shows as green if I only put 1 character in the password field.

HTML OUTPUT

<form action="/Account/Manage" class="smart-form" id="form-manage" method="post" role="form">
    <input name="__RequestVerificationToken" type="hidden" value="irDP1GHQPXnPoPveq5N3QM5qcl4kuG1yf3-yl3rRrCXSKO52rvRMVjjY6WSG0WMChq__8FLMXjH1e_OmCjSn6L7-F3BVZD0mnEV_zZRjWZNKYliS6Zf7pkKiU2GaQ2VbPWWA9Hpni2jFM4e1MHnhgA2" />
    <fieldset>
        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                <input class="input" data-val="true" data-val-required="Du må fylle inn ditt nåværende passord." id="OldPassword" name="OldPassword" placeholder="Nåværende passord" style="height:34px;" type="password" />
                <span class="icon-prepend fa fa-lock"></span>
            </label>
        </section>

        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                <input class="input" data-val="true" data-val-length="Passordet må være minst 6 tegn." data-val-length-max="100" data-val-length-min="6" data-val-required="Du må fylle inn et nytt passord." id="NewPassword" name="NewPassword" placeholder="Nytt passord" style="height:34px;" type="password" />
                <span class="icon-prepend fa fa-lock"></span>
            </label>
        </section>

        <section>
            <label class="input">
                <i class="icon-prepend fa fa-lock"></i>
                <input class="input" data-val="true" data-val-equalto="&#39;Confirm new password&#39; and &#39;New password&#39; do not match." data-val-equalto-other="*.NewPassword" id="ConfirmPassword" name="ConfirmPassword" placeholder="Bekreft passord" style="height:34px;" type="password" />
                <span class="icon-prepend fa fa-lock"></span>
            </label>
        </section>
    </fieldset>

    <footer>
        <div class="col-xs-5 col-sm-7 col-md-6" style="padding-left:28px">
            <div class="validation-summary-valid" data-valmsg-summary="true">
                <ul>
                    <li style="display:none"></li>
                </ul>
            </div>
        </div>
        <input type="submit" value="Lagre endringer" class="btn btn-default" />
    </footer>
</form>

Answer 1

Your rule declaration:

rules: {
    passwordNow: {  // <- must be name attribute
        required: true
    },
},

Your rendered HTML:

<input name="OldPassword" type="password" />

The name attributes of the input elements in your rendered HTML do not match what you've declared within .validate() in your jQuery code. They must match.

Answer 2

I think you have to Enable Client Side Validation for your views. Try adding

@{ Html.EnableClientValidation(); }

to your views or add the below entry in your web.config

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