Question

这是我第一次尝试将jQuery.Validation与ASP.NET MVC新项目一起提供的jquery.unobtrusive一起使用。

在我使用jquery.unobtrusive之前，我使用覆盖jQuery.Validator的默认值，一切都像这样完美

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output indent="yes"/>
  <xsl:strip-space elements="*"/>

  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="BankAccount[contains(@code,'INGB000')]/BankAccountType/@code">
    <xsl:attribute name="code">IBA</xsl:attribute>
  </xsl:template>

</xsl:stylesheet>

现在，我正在使用jquery.unobtrusive，当错误发生时，跨度不能正确获取样式。

我尝试设置jquery.unobtrusive的设置无法正常工作。但这是我尝试为其设置的设置

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

但是这在控制台中给我一个错误

$(function(){
    $.validator.unobtrusive.settings({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});

如何正确添加jssery.unobtrusive的css引导程序，而无需单独为每个表单添加代码。

Answer 1

确保按以下顺序加载脚本

的jQuery
jQuery Validator
您在问题中使用的默认值（必须在不引人注意之前加载，否则不显眼会覆盖它
jquery.Validator.unobtrusive

这是在步骤3中使用的代码

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

最后，您可以将此添加到您的CSS样式中，以使跨度为css bootstrap中使用的红色

.field-validation-error 
{
    color: #A94442;
}

如何覆盖jssery.unobtrusive设置工作的CSS引导样式？

1 个答案: