Избегайте дублирования сообщений об ошибках с ASP.NET CustomValidator

Question

У меня есть страницы ASP.NET, определенный таким образом:

<asp:TextBox 
    ID="_txtExitDate" 
    ClientIDMode="Static" 
    runat="server" 
    Text='<%#Bind("exit_date","{0:dd/MM/yyyy}")%>' 
    placeholder="gg/mm/aaaa" /> 
<asp:CompareValidator 
    runat = "server" 
    Type = "Date" 
    Operator = "DataTypeCheck" 
    Display = "Dynamic" 
    ControlToValidate = "_txtExitDate" 
    ErrorMessage = "Exit date invalid." 
    SetFocusOnError = "true" /> 
<asp:CustomValidator 
    Display="Dynamic" 
    runat="server" 
    EnableClientScript="true" 
    ClientValidationFunction="Validate_Exit" 
    ControlToValidate="_txtExitDate" 
    ErrorMessage="Exit date should be minor of today date." /> 

<asp:TextBox 
    ID="_txtExitTime" 
    ClientIDMode="Static" 
    CssClass="input_small" 
    runat="server" 
    Text='<%#Bind("exit_time")%>' 
    placeholder="hh:mm" /> 
<asp:RegularExpressionValidator 
    Display = "Dynamic" 
    ControlToValidate="_txtExitTime" 
    runat="server" 
    ErrorMessage="Exit time invalid" 
    ValidationExpression="^([01][0-9]|2[0-3]|[1-9]):([0-5][0-9]|[0-9])$" 
    SetFocusOnError = "true" /> 
<asp:CustomValidator 
    Display="Dynamic" 
    runat="server" 
    EnableClientScript="true" 
    ClientValidationFunction="Validate_Exit" 
    ControlToValidate="_txtExitTime" 
    ErrorMessage="Exit date should be minor of today date." /> 

The Javascript код, который вычисляет CustomValidators является:

function Validate_Exit(sender, args) { 
    var _txtExitDate = $("input[id$='_txtExitDate ']"); 
    var _txtExitTime = $("input[id$='_txtExitTime ']"); 

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) { 
     args.IsValid = true; 
     return; 
    } 

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5); 
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss"); 

    if (_exit.isAfter(moment())) { 
     args.IsValid = false; 
     return; 
    } 

    args.IsValid = true; 
} 

Сфера действия форма позволяет пользователю вводить только действительные значения даты/времени. В частности, CustomValidator предназначен для ввода нескольких комбинированных значений, которые должны быть незначительными для текущего времени.

Он работает так, как я ожидаю, за исключением побочного эффекта, который он не компрометирует, но это наглядно раздражает.

Как вы можете видеть, CustomValidator в основном то же самое и применяется к обоим текстовым полям. Если пользователь не может написать правильную комбинацию даты/времени, он выдает сообщение (это то же сообщение, потому что оно относится к сложенному значению даты/времени). В некоторых случаях сообщение об ошибке отображается «дважды», и это частично (графически) ужасно, но также немного запутывает для пользователя. Есть ли способ избежать дублирования этой проверки и обеспечить контроль для обоих текстовых полей, чтобы пользователь не путался двойным сообщением об ошибке?

С наилучшими пожеланиями, Майк

Answer 1

Вы можете использовать один CustomValidator для проверки обоих полей. Установите ID этого валидатора, но не установить ControlToValidate свойства (здесь я также установить Text свойство, чтобы показать индикатор, даже если постбэк не срабатывают):

<asp:CustomValidator 
    ID="cvDateTime" 
    Display="Dynamic" 
    runat="server" 
    Text="Invalid date!" 
    EnableClientScript="true" 
    ClientValidationFunction="Validate_Exit" 
    ErrorMessage="Exit date should be minor of today date." /> 

Вы можете установить обработчик события onchange на как TextBoxes выполнить проверку, как только каждое поле изменяется:

<asp:TextBox ID="_txtExitDate" onchange="ValidateOnChange();" ... /> 
<asp:TextBox ID="_txtExitTime" onchange="ValidateOnChange();" ... /> 

функции проверки может выглядеть следующим образом:

function ValidateOnChange() { 
    var validator = document.getElementById('<%= cvDateTime.ClientID %>'); 
    validator.isvalid = DoValidateDateTime(); 
    ValidatorUpdateDisplay(validator) 
} 

function Validate_Exit(source, args) { 
    args.IsValid = DoValidateDateTime(); 
} 

function DoValidateDateTime() { 
    var _txtExitDate = $("input[id$='_txtExitDate ']"); 
    var _txtExitTime = $("input[id$='_txtExitTime ']"); 

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) { 
     return true; 
    } 

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5); 
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss"); 

    return _exit.isSameOrBefore(moment()); 
}