Dojo/Dijit 设置无效消息和验证失败答案

【问题标题】：Dojo/Dijit setting invalid message and failing validationDojo/Dijit 设置无效消息和验证失败
【发布时间】：2017-02-15 06:13:31
【问题描述】：

我有一个表单项，其中定义了 missingMessage 和 invalidMessage。我在项目上调用表单验证方法进行验证。如果该项为空，则调用 missingMessage 并显示红色感叹号错误图标。

当用户输入特定值时，我正在尝试在文本项上设置 invalidMessage 如何在不进行硬编码的情况下显示 invalidMessage 和红色感叹号对文本项的约束。

我想用它来对项目进行自定义验证。如果用户输入特定值，我希望验证失败并返回错误。 Here 我试图告诉用户他们不能在名字字段中输入值 'John'。我设置了红色感叹号，但 invalidMessage 没有显示。

我希望当用户单击感叹号时，他们可以看到错误消息，并且当他们开始键入或更改字段内容时，不再显示感叹号和错误消息。

Jsp

<body class="claro">
    <form id="myform" data-dojo-type="dijit/form/Form">

    <input
    data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'Invalid First Name !',
            missingMessage: 'First Name Required !'"
        id="fnameTextBox" title="First Name"
    placeholder="Your First Name"
    />

    <input
    data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'Invalid Last Name !',
            missingMessage: 'Last Name Required !'"
        id="lnameTextBox" title="Last Name"
    placeholder="Your Last Name"
    />

     <button id="validateFields" data-dojo-type="dijit/form/Button">Validate</button>
    </form>
</body>

Javascript

dojo.require("dijit/form/Form");
dojo.require("dijit/form/Button");
dojo.require("dijit/form/ValidationTextBox");
dojo.require("dijit/Tooltip");

dojo.ready(function() {
    var fName = dijit.byId("fnameTextBox");
    var lName = dijit.byId("lnameTextBox"); 

    dojo.connect(dijit.byId("validateFields"), "onClick", function() {      
        var myform = dijit.byId('myform');
        myform.connectChildren();   


        if(fName == "John"){
            dijit.byId("fnameTextBox")._set("state","Error");
            dijit.byId("fnameTextBox").attr('_ErrorMessage', 'John is not allowed');

        }else{
             myform.validate();
        }

    }); 
});

【问题讨论】：

标签： javascript validation dojo dijit.form

【解决方案1】：

为特定小部件提供单独验证规则的最佳实践方法覆盖该小部件的默认 validator() 方法。

var fnameTextBox = dijit.byId('fnameTextBox');
fnameTextBox.validator = function() {
   if(this.value.indexOf("John")>-1) {
     this.set("invalidMessage",this.value+" is not allowed!");
     return false;
   }
   return true;
}
//below 2 lines to programmatically validate a specific field
fnameTextBox._hasBeenBlurred = true;
fnameTextBox.validate();
//To show the message on failing the field must be focussed
fnameTextBox.focus();

验证器函数可以有自己的验证逻辑，并且仅对该字段小部件具有主观性。如果必须将相同应用于多个，请定义函数而不是匿名函数，并将其用于各个字段。

但是，如果它只是一个值检查，我们可以只给出一个正则表达式。

regExp: '^((?!John).)*$'

以下不是最佳做法。因为调用 form.validate() 仍然会验证这个字段为真，这是不正确的。

dijit.byId("fnameTextBox")._set("state","Error");
dijit.byId("fnameTextBox").attr('_ErrorMessage', 'John is not allowed');

【讨论】：

你能帮我看看 ajax 请求吗stackoverflow.com/questions/23114089/…

【解决方案2】：

我没有足够的声誉来为上面的@Richard 评论添加评论，而且我知道这个问题很古老。它可能对某人有所帮助。

对于Dojo 1.10，为了显示错误信息，.focus() 必须先行，否则直到第二次验证发生时才会提示错误。还要将其显示为错误，还应在代码中说明： firstName.focus(); firstName.set("message", "John is not allowed."); firstName.set("state", "Error");

【讨论】：

【解决方案3】：

在您的代码中，设置属性“invalidMessage”只会更改默认的无效消息，但不会触发它显示，因为 ValidationTextBox 通过 validate() 方法。一种方法是采取你的方法，而不是做一个

firstName.set("message", "John is not allowed.");

这将导致工具提示出现。为了让 setMessage 显示，文本框必须是焦点，所以你需要调用

firstName.focus();

事先在文本框上。我已经修改了你的小提琴，让你想要在这里工作：

http://jsfiddle.net/ZtzTE/38/

【讨论】：

我删除了 item.focus() 以允许在两个项目同时出现错误时出现感叹号，但是当我输入项目时，消息不会出现或显示。我如何在输入项目时显示消息？
我刚刚编辑了小提琴（新链接在原始帖子中）以删除 if else 语句。相反，我会先执行表单验证，然后再执行您可以在之后定义的任何后续附加验证检查。
我面临的唯一问题是当我输入字段时，如果两者都有错误，我需要用户能够阅读错误，则消息不会显示。一旦我移除焦点，感叹号就会出现在两者中，但是消息不会出现。这是一个小提琴jsfiddle.net/devdarin/ZtzTE/40
我不完全确定你的要求，但我确实清理了你的代码，所以检查一下这个小提琴：jsfiddle.net/ZtzTE/41
啊，我明白你现在在说什么了。使用当前 Dojo ValidationTextBoxes 的实现方式，上述答案中的方法可能无法让您获得所需的解决方案。我认为您可能需要做的是在 ValidationTextBox 约束属性中使用正则表达式来执行此操作。