2

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

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

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

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

我检查了ValidationTextBox 的代码，但我无法弄清楚这种特殊样式是如何触发的……有人可以解释一下 ValidationTextArea 是如何工作的吗？具体来说，我不太确定如何使用this._maskValidSubsetError,aria-invalid和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;
},
4

1 回答 1

3

可能会错过明显的，隐藏在一堆内联 &&|| 中 ;)))))

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

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

小部件是有状态的，而 .set 可能只是解决问题，触发事件或发布主题

于 2012-04-29T16:44:09.253 回答