Dojo Validation TextArea 小部件在无效时如何突出显示？

Posted 2023-02-16

【中文标题】Dojo Validation TextArea 小部件在无效时如何突出显示？

【英文标题】：How do Dojo ValidationTextArea widgets get highlighted when invalid?

【发布时间】：2012-04-25 11:42:37

【问题描述】：

我正在尝试创建一个继承自 ValidationTextBox 的自定义 Dojo ValidationIdBox 小部件。我的自定义小部件将添加与后端服务器的异步重复 ID 检查。

我对 dijit.form.ValidationTextBox 进行了子类化并修改了两个方法：isValid() 和 validate()。但是，我无法让验证完全正常工作。该小部件捕获并突出显示缺少所需输入等问题。它甚至可以捕捉到重复 ID（出现工具提示），但无法按预期突出显示该字段。

我试图用下面的简化代码 sn-p 来隔离我的问题。它主要是原始的 Dojo 代码，稍作修改。我的一般策略是让小部件作为常规 ValidationTextBox 进行验证，然后测试重复 ID。我将 isValid() 修改为具有两种模式：普通验证和具有唯一性检查的验证。目前，唯一性测试故意总是失败。

以类似的方式，我修改了 validate() 来做它正常的事情，然后如果正常验证成功但唯一性测试验证失败，则进行一些额外的处理。我尝试镜像与 ValidationTextBox 处于 error 状态时相同的逻辑，但未镜像相同的效果：出现“ID 不可用”工具提示，但未出现带有感叹号的红色轮廓。

我检查了ValidationTextBox's code，但我无法弄清楚这种特殊样式是如何触发的...有人可以解释一下 ValidationTextArea 是如何工作的吗？ 具体来说，我不太确定 this._maskValidSubsetError、@使用987654324@和this.state。

（有时，我希望出现工具提示，但不希望出现红色样式。喜欢在处理 AJAX 重复 ID 检查请求时显示。）

// If ValidationTextBoxValidates
isValid: function(isFocused, requireUnique) 
    if (typeof requireUnique === 'undefined') requireUnique = false;

    var isValid = this.inherited(arguments);
    var isUnique = false;

    return (requireUnique ? (isValid && isUnique) : isValid);
,

validate: function(/*Boolean*/ isFocused)
    // summary:
    //        Called by oninit, onblur, and onkeypress.
    // description:
    //        Show missing or invalid messages if appropriate, and highlight textbox field.
    // tags:
    //        protected
    var message = "";
    var isValid = this.disabled || this.isValid(isFocused);
    if(isValid) this._maskValidSubsetError = true; 
    var isEmpty = this._isEmpty(this.textbox.value);
    var isValidSubset = !isValid && isFocused && this._isValidSubset();
    this._set("state", isValid ? "" : (((((!this._hasBeenBlurred || isFocused) && isEmpty) || isValidSubset) && this._maskValidSubsetError) ? "Incomplete" : "Error"));
    this.focusNode.setAttribute("aria-invalid", isValid ? "false" : "true");

    if(this.state == "Error")
        this._maskValidSubsetError = isFocused && isValidSubset; // we want the error to show up after a blur and refocus
        message = this.getErrorMessage(isFocused);
    else if(this.state == "Incomplete")
        message = this.getPromptMessage(isFocused); // show the prompt whenever the value is not yet complete
        this._maskValidSubsetError = !this._hasBeenBlurred || isFocused; // no Incomplete warnings while focused
    else if(isEmpty)
        message = this.getPromptMessage(isFocused); // show the prompt whenever there's no error and no text
    

    /// Begin custom widget code
    if (isValid && !this.isValid(isFocused, true) ) 
        isValid = false;

        var isValidSubset = !isValid && isFocused && this._isValidSubset();

        this._maskValidSubsetError = isFocused && isValidSubset; // we want the error to show up after a blur and refocus
        message = 'ID not available';

        this.focusNode.setAttribute("aria-invalid", isValid ? "false" : "true");
    
    /// End custom widget code

    this.set("message", message);
    return isValid;
,

【参考方案1】：

可能会遗漏明显的隐藏在大量内联 &&|| 中的内容;))))))

模糊/按键机制的要点是工具提示将仅在当前显示的框上可见，因此 _maskValid

你试过this.set("state", this.isUnique() ? "" : "Error");吗？？

小部件是有状态的，而 .set 可能只是起到作用，触发事件或发布主题

【讨论】：

this._set("state", "Error") 启用红色验证边框。

那么 this._set("state", "") 应该删除它对吗？ “”我无法弄清楚这种特殊样式是如何被触发的“”不知道你具体问的是什么。但是，我可以告诉您，咏叹调/wairole 不应该成为您的关注点 - 维护良好的习惯，但它仅适用于可访问性和屏幕阅读器，与样式完全无关

然而。您可能知道，“红色验证边框”在验证错误中可见，然后 - 当框获得焦点时，会显示 Tooltip（消息），此外还设置在 missingMessage 和 invalidMessage 中 - 这是maskValidSubsetError 的目的；要知道如何反应onFocus