Question

我有一个代码，用于验证文本字段中的正确输入。使用Jquery，系统可以验证正确或有效的电子邮件地址，例如空字段。我以模态显示错误消息。在通知用户的同时，文本字段也使用CSS将其边框用红色着色。

冲突在于在模式中显示错误消息，它在消息中也有一个红色的边框。我该如何删除它。

这是代码

  $("#RoleConfigForm").validate({
        rules: {

            "group_code[]": {
                required: true,
                maxlength: 25,
            },
            "role_name[]": {
                required: true,
                maxlength: 25,
            },

            "email_address[]": {
                required: true,
                maxlength: 30,
                email: true,
            },
        },
        onkeyup: false,
        onfocusout: false,
        errorClass: "invalid",
        errorPlacement: function (error, element) {
            $('#ResultDialog p').html(error);
            $('#ResultDialog').modal();
        },

        submitHandler: function (form) {
            ajaxFormSubmit();
        }
    });

    jQuery.extend(jQuery.validator.messages, {
        required: "@hmis_resources.Message.msg_empty_fields",
        email: "@hmis_resources.Message.msg_invalid_email"
    });

CSS

 .invalid {
        border: 1px solid red !important;
    }

模态的HTML

<div class="modal fade" id="ResultDialog" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-result" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><img src="/Content/images/close.png"></button>
                <h4 class="modal-title">HMIS</h4>
            </div>
            <div class="modal-body" id="ResultMsg">
                <p></p>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-xs-3"></div>
                    <div class="col-xs-6">
                        <div class="dialog_confirm_btn" data-dismiss="modal">@hmis_resources.Resource.btn_confirm</div>
                    </div>
                    <div class="col-xs-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

请更新errorPlacement

以下代码

    errorPlacement: function (error, element) {
    $('#ResultDialog p').html(error);
    $('#ResultDialog p').css('border','none');
    $('#ResultDialog').modal();
},

Answer 2

据我所知，您希望红色边框出现任何错误。使用您想要的样式覆盖.invalid类，如：

.invalid{
  border: none !important;
}

对于该无效的类元素，它根本没有任何边框。您还可以在无效的类元素上使用边框的默认样式，如：

.invalid{
  border: inherit;
}

我希望它能解决你的问题

如何在Jquery Validate中覆盖errorClass

2 个答案: