dojo dijit 클라이언트 측 유효성 검사 onchange

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

당신은 validator 메소드를 오버라이드 (override) 할 수있는 위젯을 하위 클래스로 할 수있다. 아마 기본 함수를 원하면 결과를 참이면 getXhr을 사용하여 자체 테스트를 실행하고 결과를 반환하십시오.

An example at dojocampus은 유효성 검사기 메소드를 그냥 훼손합니다. 그것은 또한 당신이하고 싶은 것에 따라 효과가있을 수 있습니다.

Answer 2

컨트롤에 대해 유효성 검사 메서드 (유효성 검사기)를 사용할 때 같은 문제가 있었던 것 같습니다. 나는 문제가 ashronous이므로 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 매개 변수에서 "동기화"를 사용했습니다. 또한 문제가있었습니다 (쿼리가 끝날 때까지 컨트롤을 잠그는 것 외에는 ...)