无法在 FilteringSelect 输入上触发自定义验证功能答案

【问题标题】：Unable to trigger custom validation function on a FilteringSelect input无法在 FilteringSelect 输入上触发自定义验证功能
【发布时间】：2017-06-02 21:17:35
【问题描述】：

以下代码适用于文本框，我可以用我自己的方法覆盖默认验证器函数并将其强制为return false，从而使输入无效。但是，这根本不适用于 FilteringSelect 输入。以下代码始终返回 true - 实际上它从未进入我的自定义验证函数。

这意味着它正在执行与预期不同的验证器，或者我在错误的输入上设置了验证器（呈现时有多个）。

var customValidator = function (value) {
    console.log("custom validator: ", value);
    return false;  //force an invalid result
};

formelement.theInput.set('validator', customValidator);

var res = formelement.theInput.validate();
console.log("res: ", res);

小部件模板看起来像这样

<div data-dojo-attach-point="formelement"  >
    <select data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-point="theInput" 
            data-dojo-props="labelAttr:'text', searchAttr:'text', required:false, "   >
    </select>
</div>

渲染时是这样的

<div data-dojo-attach-point="formelement" style="position: absolute; left: 222px; top: 75px; width: 200px; border-width: 1px; border-style: none; border-color: black;" class="fe-dropdown resize-handle" id="4180a54b-3931-472e-8c5f-212bfddc88b2" widgetid="uniqName_10_10">
    <div class="dijit dijitReset dijitInline dijitLeft fe-element dijitTextBox dijitComboBox dijitValidationTextBox dijitTextBoxFocused dijitComboBoxFocused dijitValidationTextBoxFocused dijitFocused" id="widget_dijit_form_FilteringSelect_28" role="combobox" aria-haspopup="true" data-dojo-attach-point="_popupStateNode" widgetid="dijit_form_FilteringSelect_28" aria-disabled="false" popupactive="true" aria-expanded="false" aria-owns="dijit_form_FilteringSelect_28_popup">
    <div class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="_buttonNode" role="presentation">
        <input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " type="text" tabindex="-1" readonly="readonly" role="button presentation" aria-hidden="true">
    </div>
    <div class="dijitReset dijitValidationContainer">
        <input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " type="text" tabindex="-1" readonly="readonly" role="presentation">
    </div>
    <div class="dijitReset dijitInputField dijitInputContainer">
        <input class="dijitReset dijitInputInner" type="text" autocomplete="off" data-dojo-attach-point="textbox,focusNode" role="textbox" aria-autocomplete="both" tabindex="0" id="dijit_form_FilteringSelect_28" aria-required="false" value="" aria-invalid="false" maxlength="25" style="font-family: Arial; font-weight: 400; font-style: normal; color: black; text-decoration: none; text-align: left; background-color: transparent;">
        <input type="hidden" value="CA">
    </div>
</div>
</div>

【问题讨论】：

标签： javascript validation dojo dijit.form

【解决方案1】：

我认为这是由于 isValid 函数，它在 FilteringSelect 中被覆盖，因此它不会具有与 textBox 相同的行为。

我的建议是在将您的自定义验证器设置为波纹管之后再次覆盖 isValid：

formelement.theInput.isValid = 
    function() {
          return this.validator(this.textbox.value,this.get('constraints')); 
         // force new validator above 
    }

下面是一个示例 sn-p：

require(["dijit/registry", "dijit/form/FilteringSelect","dojo/on","dijit/form/Button","dojo/ready"],
		function(registry,dom,On,Button,ready){
    		ready(function(){
          var customValidator = function (value) {
              console.log("custom validator: ", value);
              return false;  //force an invalid result
          };
          formelement = registry.byId("formelement");
          formelement.set('validator', customValidator);
          
          formelement.isValid = function() {
            return this.validator(this.textbox.value, this.get('constraints'));}

          var res = formelement.validate();
          console.log("res: ", res);
          
          var btn = registry.byId("btn");
          On(btn,"click",function(){
            console.log(formelement.validate());
          });
        })
    });

<script>
dojoConfig = {
  isDebug: true,
  parseOnLoad: true,
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>

<body class="claro">
<div data-dojo-type="dijit/form/Button" id="btn"> Validate </div>
<div data-dojo-attach-point="formelement"  >
    <select id="formelement" data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-point="theInput" 
            data-dojo-props="labelAttr:'text', searchAttr:'text', required:false, "   >
    </select>
</div>
</body>

【讨论】：

有意义吗？
验证器的有趣使用
我测试了这段代码，是的，它有效（适用于所有使用验证器、文本框、过滤选择、数字文本框等的输入类型），谢谢。