表单中的 Javascript 验证

Question

多年来我一直试图解决这个问题。JavaScript 被调用，但它不会调用错误消息。它总是显示为没有错误，即使它应该调用错误消息。所有字段都显示为绿色。

我在这方面还很陌生，所以尽可能多地尝试谷歌搜索。对于某些地方的贫民窟代码样式，我提前表示歉意:)

@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>
}

部分内的表单:

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

这是表格:

@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>
}

除了如果我 f.ex 没有填写字段时错误消息不会显示外，一切正常(令人惊讶)。所需的长度也不起作用。如果我在密码字段中只输入 1 个字符，仍然显示为绿色。

HTML 输出

<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

您的规则声明:

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

您呈现的 HTML:

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

呈现的 HTML 中输入元素的 name 属性与您在 jQuery 代码中的 .validate() 中声明的不匹配。它们必须匹配。