dojo dijit客戶端驗證onchange

因此，我遵循了Dojo中的示例 - 使用Dojo JavaScript庫構建Ajax應用程序，以將服務器端驗證添加到窗體上的用戶名validationtextbox字段。基本上我添加了一個提交xhrGet請求的usernameOnChange函數，xhrGet返回JSON並由usernameValidationHandler處理。dojo dijit客戶端驗證onchange

它工作的很好，但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??? 
    } 
}

來源

2010-01-12 Adam

您可以使用dojo.connect將小部件中的'onChange'方法直接連接到將保留'this '參考。這樣你就不必進行id查找並鎖定到一個小部件實例。 – peller

您可以繼承該窗口小部件以覆蓋validator方法。如果你想要基本功能，可能需要鏈接，那麼，如果結果是真的，用getXhr運行你自己的測試並返回結果。

An example at dojocampus只是修改驗證方法。這也可能起作用，取決於你想要做什麼。

來源

2010-01-12 20:58:18 peller

你能舉個例子嗎？有沒有一種標準的方法來進行這種驗證？爲什麼沒有我可以設置的屬性來表示該字段無效？這似乎是一個奇怪的例子，檢查領域onChange，但不是無效的。 – Adam

我建議你重寫驗證方法，而不是掛鉤onChange，實際上。我上面的評論是學術性的。我將添加一個鏈接到我在上面找到的示例。 – peller

看來當我使用控件的驗證方法（驗證器）時，我遇到了同樣的問題。我認爲這個問題與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參數使用「同步」，以及嘗試。它也有問題（除了顯式鎖定控件，直到查詢完成）...

來源

2011-01-09 16:03:45 Autumn

dojo dijit客戶端驗證onchange

回答

相關問題