Question

我有一个表单，如果任何字段验证器失败，我会应用错误样式。如果验证失败，则会显示工具提示，这只是asp验证控件中的div，例如：

<asp:RequiredFieldValidator ValidationGroup="Enquiry" Display="Dynamic" EnableClientScript="true" ID="rfvName" runat="server" ControlToValidate="txtName">
      <div class="tooltip-container name-error">
           Please enter your name
      </div>
</asp:RequiredFieldValidator>

我有一些jQuery来查看这些工具提示并检查是否有任何可见，如果是，则将边框样式应用于生成错误的关联字段。这一切都很好，但是如果用户在字段中输入有效信息，我需要更新边框样式，然后应该删除边框样式。

我也有这个工作正常，除了我的表单中有一个有两个工具提示的字段，因此有两个asp验证控件。必需的字段验证程序和正则表达式验证程序。所以我所做的是获取包含错误消息的父td内所有子span元素的计数，如果其中任何一个是可见的，那么应该应用错误样式（因为正在显示错误工具提示），并且如果没有子跨度可见，那么我们应该从字段中删除错误类，因为验证已经过去了。

出于某种原因，这对于这一领域不起作用。

这是JS：

jQuery(document).ready(function ($) {

    //removed...

    UpdateFieldErrorOnBlur();
});

/* Form error validation styling */

var errorSelectors = [
    ['div.name-error', 'input.name-field'],
    ['div.email-error', 'input.email-field'],
    ['div.email-error-valid', 'input.email-field'],
    ['div.enquiry-type', 'select.enquiry-field'],
    ['div.message-error', 'textarea.message-field']];

function UpdateFieldErrorOnBlur() {
var $ = jQuery;
$.each(errorSelectors, function (index, item) {
    $(item[1]).blur(function () {
        var parentContainer = $(item[0]).parents('td');
        var errorCount = parentContainer.children('span[style="display: inline;"]').length;

        if (errorCount === 0) {
            $(item[1]).removeClass('error');
        }
        else {
            $(item[1]).addClass('error');
        }
    });
});
}

function SetFieldErrorStyling() {
var $ = jQuery;
$.each(errorSelectors, function (index, item) {
    $(item[0] + ':visible').livequery(function () {
        $(item[1]).addClass('error');
    });
    $(item[0] + ':hidden').livequery(function () {
        $(item[1]).removeClass('error');
    });
});
}

我在这里查看父<td>中的任何子错误消息：

var parentContainer = $(item[0]).parents('td');
var errorCount = parentContainer.children('span[style="display: inline;"]').length;

如果错误计数为0，则删除该类，否则应用该类。我在if语句之前已经提醒了errorCount变量，并且每次对于相关字段都是1这是您所期望的，但如果用户清除该字段然后单击，则仍会删除该类在它之外失去焦点。

有人可以帮忙吗？

Answer 1

我使用以下函数显示使用bootstrap类的验证错误：

function highlight() {
    var $keep;

    if(typeof(Page_Validators) !== 'undefined')
    {
        $.each(Page_Validators, function (index, validator) {                
            if (!validator.isvalid) {                    
                $keep = validator.controltovalidate;   
                switch (window.event.type) {
                    case 'submit': $('body').animate({
                        scrollTop: $(document.getElementById($keep)).position().top
                    }, 1000).clearQueue(); break;
                    default: null
                }           
                $(validator).parent().addClass('has-error');
            } else {
                if ($keep != validator.controltovalidate)
                    $(validator).parent().removeClass('has-error');                                            
            }
        });
    };
};

呼叫：

$('form').on('keyup submit', function () {
    highlight();
});

也许它会为你和其他人节省一些时间并发现它很有用。

使用jQuery更新字段模糊/焦点丢失的表单字段上的错误样式

1 个答案: