자바 스크립트 양식 유효성 검사, 검증 및 제출에 onblur

Question

나는 우리가 각 필드이

  <p> 
       <label>Full Name *</label> 
       <input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" /> 
       <span class="formHint" id="hintFullName">Enter your full name</span> 
       <span id="errorFullName"></span> 
       <span class="success" id="successFullName"><img src="images/tick.png" /></span> 
      </p> 

같은 위해 onblur 체크 형태를 통해 이동 기본적으로, 기본 양식 유효성 검사 스크립트를 작성하고 모든 기능의 유효성 검사를 호출 잘 작동이되는 필드 이름을 전달할 수 있도록 입력했는지 여부를 확인합니다. 이것은 모두 괜찮습니다. 아래는 validate 함수입니다.

function validate(field) { 


    // Get the value of the input field being submitted 
    value = document.getElementById(field).value; 

    // Set the error field tag in the html 
    errorField = 'error' + field; 

    // Set the success field 
    successField = 'success' + field; 

    if (value != '') { 
     document.getElementById(successField).style.display = 'block'; 
     document.getElementById(errorField).style.display = 'none'; 
    } else { 
     document.getElementById(successField).style.display = 'none'; 
     document.getElementById(errorField).style.display = 'block'; 
    } 
} 

이제 내 질문은 onblur를 사용하여 즉시 확인한 후 제출할 때 가장 좋은 방법은 무엇입니까? 수동으로 모든 양식 필드를 검사하는 또 다른 함수를 작성해야하며 더 좋은 방법이 있습니다.

나는 그것에 대해 잠시 생각해 봤지만 한 번 제출하는 것이 가장 좋은 방법이라고 생각하는 것 같습니다.

죄송합니다.이 중 하나라도 이해가되지 않는다면 지금 몇 시간 동안 혼란스러워하고 있습니다.

미리 감사드립니다.

Answer 1

아, 검증!

그래, 수동으로 확인해야합니다. 어떻게 "수동으로"다를 수 있습니다. 그것은 다음과 같이 직선, 짐승 수동 수 :

function handleOnSubmit(e) { 
    validate('FullName'); 
    validate('ZipCode'); 
    validate('City'); 

    // Loop through all error fields and see if any are present 
} 

하지 매우 효율적, 여러분이 알다시피 ...

이 대신 현실을 수행하는 루프를 작성하자!

그러나 그 전에는이라고 입력하고 validate 함수를 업데이트하여 /가 없으면 true/false를 반환하는 것이 좋습니다. 같은

뭔가 :

if (value != '') { 
    document.getElementById(successField).style.display = 'block'; 
    document.getElementById(errorField).style.display = 'none'; 
    return true; 
} else { 
    document.getElementById(successField).style.display = 'none'; 
    document.getElementById(errorField).style.display = 'block'; 
    return false; 
} 

좋아!

이제 모든 양식 요소로 validate 함수를 호출 할 수있는 상위 유효성 검사기를 만들 수 있습니다. "의 상태를 유지하는 것입니다 (이미 검증 요소를 다시 검증 복수를 실행하지 않으려면) http://jsfiddle.net/ww2grozz/

다른 방법 : 같은

뭔가 :

function handleOnSubmit(e) { 
    // Query your elements some how 
    var inputs = document.forms[0].getElementsByTagName('input'); 

    // Loop your elements 
    for (i = 0, len = inputs.length; i < len; i++) { 
     if(validate(inputs[i].id) === false) { 
      // Error occurred - we'll prevent the form submission 
      e.preventDefault(); 
     } 
    } 
} 

여기 데모에 대한 JSFiddle있어 유효성이 검증 된 "객체. 그런 다음에 대해 확인할 수 있습니다. 이 같은

뭔가 :

var validated = {}; 

function validate(field) { 
    // Existing logic 

    if (value != '') { 
     validated[field] = true; 
    } else { 
     validated[field] = false; 
    } 
} 

그런 다음, 다시 위의 부모 검증에가는 :

이

function handleOnSubmit(e) { 
    // Query your elements 
    var inputs = document.forms[0].getElementsByTagName('input'); 

    // Loop your elements 
    for (i = 0, len = inputs.length; i < len; i++) { 
     var name = inputs[i].id; 

     if (!validated[name]) { 
      // Prevents submission 
      e.preventDefault(); 

      // Call validate 
      validate(name); 
     } 
    } 
} 

두 번째 바이올린이 : http://jsfiddle.net/ww2grozz/2/

마지막으로,이 경우 서버 것입니다 ... 서버 측 유효성 검사를 잊지 마십시오!