ASP验证的样式 - RequiredFieldValidator&的RegularExpressionValidator

时间:2014-07-15 12:47:51

标签: jquery css asp.net forms validation

我正在努力使用ASP表单并从一开始就明确表示,我是ASP.Net的新手。

问题在于,当填充错误时,我想要设置输入标签的样式。 我使用了这段代码:https://stackoverflow.com/a/11954218/3840831 对我来说这看起来像这样:

/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
    function UpgradeASPNETValidation() {
        if (typeof (Page_ClientValidate) != "undefined") {
            AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
            ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
        }
    }

    /**
    * This function is called once for each Field Validator, passing in the 
    * Field Validator span, which has helpful properties 'isvalid' (bool) and
    * 'controltovalidate' (string = id of the input field to validate).
    */
    function NicerValidatorUpdateDisplay(val) {
        // Do the default asp.net display of validation errors (remove if you want)
        AspValidatorUpdateDisplay(val);

        // Add our custom display of validation errors
        if (val.isvalid) {
            // do whatever you want for invalid controls
            $('#' + val.controltovalidate).closest('.form-group').removeClass('has-error has-feedback');
        } else if(!val.isvalid) {
            // reset invalid controls so they display as valid
            $('#' + val.controltovalidate).closest('.form-group').addClass('has-error has-feedback');
        }
    }

    // Call UpgradeASPNETValidation after the page has loaded so that it 
    // runs after the standard ASP.NET scripts.
    $(document).ready(UpgradeASPNETValidation);

它工作正常,但...... 在我的一些输入中,我同时拥有“RequiredFieldValidator”和& “RegularExpressionValidator”就像这样:

<div class="form-group">
        <label class="col-sm-4 control-label">
            Telefon (8 cifre, uden mellemrum)
        </label>
        <div class="col-sm-8">
            <asp:TextBox ID="TxtPhone" CssClass="form-control" runat="server"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="Ugyldigt telefon-format" Text="*" ControlToValidate="TxtPhone" SetFocusOnError="true" ValidationExpression="^(\d\d\d\d\d\d\d\d)$"><span class="glyphicon glyphicon-remove form-control-feedback"></span></asp:RegularExpressionValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="Udfyld venligst telefon" Text="*" ControlToValidate="TxtPhone"><span class="glyphicon glyphicon-remove form-control-feedback"></span></asp:RequiredFieldValidator>
        </div>
    </div>

当JQuery必须弄清楚它是“RegularExpressionValidator”还是“RequiredFieldValidator”时,会出现问题。 如果我遗漏任何信息,现在就告诉我。

1 个答案:

答案 0 :(得分:1)

我找到了一个看起来像这样的解决方案:

/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
    if (typeof (Page_ClientValidate) != "undefined") {
        AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
        ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
    }
};

/**
* This function is called once for each Field Validator, passing in the 
* Field Validator span, which has helpful properties 'isvalid' (bool) and
* 'controltovalidate' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
    // Do the default asp.net display of validation errors (remove if you want)
    AspValidatorUpdateDisplay(val);

    $('.form-group').each(function () {
        var errors = $(this).find('.error:not(:hidden)').length;
        if (errors > 0) {
            $(this).addClass('has-error has-feedback');
        } else {
            $(this).removeClass('has-error has-feedback');
        }
    });
};


// Call UpgradeASPNETValidation after the page has loaded so that it 
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);