Question

所以我按照Dojo中的示例 - 使用Dojo JavaScript库构建Ajax应用程序，将服务器端验证添加到表单上的username validationtextbox字段。基本上我添加了一个提交xhrGet请求的usernameOnChange函数，xhrGet返回JSON并由usernameValidationHandler处理。

效果很好，但usernameValidationHandler仅将工具提示显示消息设置为错误。它不会将字段设置为无效，因此用户仍然可以提交表单。如何将字段设置为无效，以便表单不会提交？

    <input type="text" id="userName" name="userName" size="20" 
       dojoType="dijit.form.ValidationTextBox"
       trim="true" 
       required="true" 
       onChange="userNameOnChange"
       regExp="\w+"
       invalidMessage="User name is required"
    />

function userNameOnChange() { 
    var userName = dijit.byId("userName").getValue();
    if (userName == "") {
        return;
    }        
    dojo.xhrGet( { 
        url: "validateUserName.jsp?userName=" + userName,
        handleAs: "json",
        handle: userNameValidationHandler
    });
}

function userNameValidationHandler(response) {
    dijit.byId("userName").displayMessage();

    if (!response.valid) {
     var errorMessage = "User name already taken";
        // Display error message as tooltip next to field
        dijit.byId("userName").displayMessage(errorMessage);
        // HOW DO I SET THE FIELD TO BE INVALID NOW???
    }
}

Answer 1

当我使用验证方法（验证器）进行控制时，我似乎遇到了同样的问题。我认为问题在于xhrGet方法的性质，因为它是异步的，因此确定值是否有效的方法在查询完成之前返回。无论如何，这是我为了让它发挥作用而做的。如果还有其他方式，希望有人可以发帖。

 dojo.require("dijit.form.ValidationTextBox");

 function validateUsername(value, constraint) {
   // I believe the whole reason you have to hack at control to get it to 
   // display an error is due to the nature of the xhrGet call. Since the
   // call is being made asychronously, the method would have already
   // returned a result to the html control before query has finished.
   // Therefore you have to do the extra method calls below. Also note
   // that when the form goes for submission, it calls each controls validator
   // method again! Meaning it will query the webpage again.
   var loginID = dijit.byId("user_login");

   var bNoNameFound = ("Error" == loginID.get("state")) ? false : true;

   if ("" == loginID.value) {
     // for some required=true is not kicking in, so we are forcing it.
     bNoNameFound = false;
   } else {
     if (false == loginID._focused) {
       console.log("Checking username...");
       dojo.xhrGet({
         url: "functions/does_user_exist.php?user_login=" + value,
         handleAs: 'text',
         content: {
           l: value
         },
         timeout: 10000,
         load: function(data) {
           if (1 == data) {
             // setting the state to error since the username is already taken
             bNoNameFound = false;
             loginID.set("state", "Error");
             loginID.displayMessage("The username is already taken...");
             // used to change the style of the control to represent a error
             loginID._setStateClass();
             console.log("Invalid username");
           } else {
             bNoNameFound = true;
             loginID.set("state", "");
             loginID.displayMessage("");
           }
         }
       });
     }
   }

   return bNoNameFound;
 }

<input dojoType="dijit.form.ValidationTextBox" type="text" name="user_login" id="user_login" value="" minSize="1" maxSize="25" tabindex="10" required="true" trim="true" regExp="\w+" validator=validateUsername />

注意：我也尝试在xhrGet参数中使用“sync”。它也有问题（除了明显的锁定控件直到查询完成）...

Answer 2

您可以将窗口小部件子类化以覆盖validator方法。如果您想要基本功能，可能会链接起来，如果结果为true，请使用getXhr运行您自己的测试并返回结果。

An example at dojocampus只是破坏了验证方法。这可能也有效，取决于你想做什么。

dojo dijit客户端验证onchange

2 个答案: