dojo dijit проверка на стороне клиента onchange

Question

Таким образом, я последовал примеру в Dojo - Использование библиотеки JavaScript Dojo для сборки Ajax-приложений, чтобы добавить проверку на стороне сервера в поле username validationtextbox в моей форме. В основном я добавил функцию usernameOnChange, которая отправила запрос xhrGet, 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

Кажется, у меня были те же проблемы, когда я использовал метод проверки (validator) для элемента управления. Я думаю, что проблема связана с природой метода 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 />

Примечание: я также пытался использовать "sync" в параметрах xhrGet. У него также были проблемы (кроме очевидной блокировки элемента управления до выполнения запроса) ...

Answer 2

Вы можете создать подкласс виджета для переопределения метода validator . Возможно, по цепочке, если вам нужна базовая функциональность, тогда, если результат равен true, запустите собственный тест с getXhr и верните результат.

Пример в dojocampus просто забирает метод валидатора. Это также может работать, в зависимости от того, что вы хотите сделать.