dojo dijit validation côté client onchange

Question

J'ai donc suivi l'exemple dans Dojo - Utilisation de la bibliothèque JavaScript Dojo pour créer des applications Ajax pour ajouter une validation côté serveur au champ validationtextbox de mon formulaire. Fondamentalement, j'ai ajouté une fonction usernameOnChange qui a soumis une requête xhrGet, le xhrGet renvoie JSON et est géré par le nom d'utilisateurValidationHandler.

Cela fonctionne très bien, mais le nom d'utilisateur ValidationHandler ne définit le message d'affichage d'info-bulle qu'une erreur. Il ne définit pas le champ pour être invalide et donc l'utilisateur peut toujours soumettre le formulaire. Comment définir le champ pour qu'il ne soit pas valide afin que le formulaire ne soit pas envoyé?

<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

Vous pouvez sous-classe le widget pour remplacer la méthode validator. Peut-être enchaîner, si vous voulez la fonctionnalité de base, alors, si le résultat est vrai, lancez votre propre test avec getXhr et renvoyez le résultat.

An example at dojocampus vient de clober la méthode du validateur. Cela pourrait aussi fonctionner, selon ce que vous voulez faire.

Answer 2

Il semble que j'avais les mêmes problèmes lorsque j'ai utilisé la méthode de validation (validateur) pour le contrôle. Je pense que le problème est lié à la nature de la méthode xhrGet car elle est asynchrone, donc la méthode permettant de déterminer si la valeur est valide est renvoyée avant que la requête ne soit terminée. En tout cas, c'est ce que j'ai fait pour le faire fonctionner. S'il y a un autre moyen, j'espère que quelqu'un pourra poster.

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 />

Note: J'ai essayé également d'utiliser "synchronisation" dans les paramètres xhrGet ainsi. Il a également eu des problèmes (en dehors de l'évidence de verrouiller le contrôle jusqu'à ce que la requête est terminée) ...