2011-08-12 1 views
3

나는 작동하는 custom AJAX vtype을 사용합니다. 그러나 나는 extjs 문서 노트를 보았습니다필드를 잘못 표시하기

"참고 :이 메서드는 필드의 유효성 검사 또는 isValid 메서드로 값이 유효성 검사를 통과하면 false를 반환하지 않으므로 단순히 필드를 유효하지 않은 것으로 표시하면 양식 제출이 금지되지 않습니다. Ext.form.action.Submit.clientValidation 옵션 세트와 함께 제출됩니다. "

form.isValid()가 false를 반환하도록 필드를 유효하지 않은 것으로 표시하는 방법은 무엇입니까? 내 VTYPE : 당신이 clientValidation의 정의를 보면

Ext.apply(Ext.form.VTypes, { 
username: function(value, field){   
    var conn = new Ext.data.Connection(); 
    conn.request({ 
     url: 'test.php', 
     params:{email:value}, 
     method: 'POST', 

     success: function(responseObject){ 
      var resp = responseObject.responseText; 
      if (resp == 0) { 
       field.markInvalid('This email is invalid or already registered!');     
      } else if (resp == 1) { 
       field.clearInvalid(); 
      } 
     }, 
     failure: function(){     
      Ext.Msg.show({title: 'Error', msg: 'Connection error!',}); 
     } 
    }); 
    return true; 
} 
}); 

답변

1

음 :

는 폼의 필드를 제출하기 전에 isValid에 최종 호출에 검증 여부를 결정합니다. 이 문제를 방지하려면 양식 제출 옵션 에 false를 전달하십시오. 정의되지 않은 경우 사전 제출 필드 유효성 검사는 입니다. false과의 세트가 다음 양식이 자동으로 복종하기 전에 확인 될 경우

기본적있는 당신이 잘못 같은 필드를 표시 한 경우는 실패합니다 포인트 ... 말하고있다. true으로 설정 한 경우 양식을 제출하기 전에 양식이 올바른지 수동으로 확인해야합니다.

AJAX vtype이 절대로 작동하지 않는다는 점을 지적 해 두는 것이 좋습니다. 양식이 vtype을 호출하여 해당 필드가 유효한지 여부를 확인하면 응답으로받는 모든 것은 true ... 양식이 무엇이든 상관없이 제출됩니다. ajax 요청이 완료된 후 리턴하도록 알려주더라도, vtype ajax 요청이 완료되기 전에 양식이 제출됩니다.

더 나은 솔루션이 제출 버튼의 클릭 이벤트를 강제 단지

if(form.isValid()) { 
    form.getForm().submit(); 
} 

을 아약스 요청하여 success에서 다음 ... 수동으로 제출 단추 처리기에 VTYPE에 대한 호출을 포함하는 것 먼저 사용자 이름 필드의 유효성을 검사 한 다음 양식을 제출합니다.

+0

그런 양식을 제출하면 비동기가 중단됩니다. :(양식에 대한 수동 검증을 피하기를 선호합니다. 이론적으로는 vtype 검사를 넘어서서 isValid = false를 설정하는 함수를 사용하는 것이 훨씬 쉽습니다. – Alex

+0

ajax 성공 호출을 사용하지 않고는 왜냐하면 그것은 본질적으로 비동기이기 때문에 ... 폼 유효성 검사는 true를 리턴하고 폼은 아약스 요청이 완료되기 전에 제출됩니다. 당신은'submit()'메소드를 오버라이드하거나, 모든 타입을 체크하고 강제로 호출해야합니다 ajax 요청을 수동으로 처리하고, 콜백 함수를 인수로 사용하도록 강제합니다. – JamesHalsall

관련 문제