表单中的Javascript验证

时间:2014-04-17 09:09:40

标签: javascript jquery asp.net-mvc jquery-validate asp.net-mvc-5

我试图解决这个问题已经很久了。 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>
}

一切都有效(令人惊讶),但错误信息并不表示我是否填写了字段。所需的长度也不起作用。如果我只在密码字段中输入1个字符,仍然显示为绿色。

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>

2 个答案:

答案 0 :(得分:2)

您的规则声明:

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

您呈现的HTML:

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

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

答案 1 :(得分:0)

我认为您必须Enable Client Side Validation了解您的观点。尝试添加

@{ Html.EnableClientValidation(); }

查看您的观点或在您的web.config中添加以下条目

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