모든 양식 항목이

Question

내가 뭔가 도움이 필요 유효 할 때 제출 가능 ...

<form name="" id="" method="" action=""> 

    <input type="text" id="text1" name="text1" /> 
    <br /> 
    <br /> 

    <input type="text" id="text2" name="text2" /> 
    <br /> 
    <br /> 

    <input type="text" id="text3" name="text3" /> 
    <br /> 
    <br /> 

    <input type="text" id="text4" name="text4" /> 
    <br /> 
    <br /> 
    <input type="submit" value="let's go" disabled="disabled" /> 

</form> 

지금 내가 할 때 제출 가능하게하는 간단한 스크립트를 갖고 싶어 ... 나는 다음과 같은 형태를 말하는 텍스트 상자의 값은

그래서 내가

function enableButton(){ 

    var formitemsArray = ['text1','text2','text3','text4'], 
     i; 

     // Loop through all items 
     for(i=0;i<formitemsArray.length;i++){ 

      // validate the length on the keypress... 
      formitemsArray.onkeypress = function(){ 

       // loop through all the items again 
       for(j=0;j<formitemsArray.length;j++){ 

        if(formitemsArray[j] == "" || formitemsArray[j] == null){ 
         // return false or something??? 
        }else{ 
         document.getElementById("submitButton").disabled = false; 
        } 

       } 
      } 

     } 

} 

지금 내가에있어 생각하는 창로드에 바인딩이 같은 ...이 ... 빈 문자열 또는 null 아니다 솔루션에 대한 올바른 라인은 있지만 내가 너무 빨리 false를 반환 할 때 모든 항목이 길이가 0 인 문자열보다 큽니다. 누군가 나를 똑바로 세울 수 있니?

Answer 1

이벤트 버블 링에 오신 것을 환영합니다.

다음과 같은 작업을 수행합니다. 전체 요소 및 모든 하위 요소에 대한 이벤트 (onkeypress)를 수신합니다. 어느 것이 당신이 할 수있는 의미 다음

document.getElementById('form-id').onkeypress = function(e) { 
    var text1 = document.getElementById('text1'), 
     text2 = document.getElementById('text2'), 
     text3 = document.getElementById('text3'), 
     text4 = document.getElementById('text4') 

    if (text1.value.length > 0 && 
     text2.value.length > 0 && 
     text3.value.length > 0 && 
     text4.value.length > 0) { 
     document.getElementById('submit-button').disabled = false 
    } 

    // As an aside, for later: if you want to get the element 
    // that triggered the event, you have to do the following 
    // to be cross-browser: 
    var evt = e || window.event, // IE doesn't get the event passed by argument 
     target = e.target || e.srcElement // 'target' is official, old versions of FF used 'srcElement' 

    // With the 'target' variable, you can now play. 
} 

가 다른 더 일반적인 솔루션이지만 (필요에 맞게 그것이 forEach 심 있어야한다는 사실을 명심해야되지 않을 수 있습니다

// Declare a counter variable 
var count = 0 
document.getElementById('form-id').onkeypress = function(e) { 
    // Get all the inputs! 
    var inputs = this.getElementsByTagName('input') 

    // Now loop through all those inputs 
    // Since a NodeList doesn't have the forEach method, let's borrow it from an array! 
    [].forEach.call(inputs, loopThroughInputs) 
} 
function loopThroughInputs(input) { 
    // First check the type of the input 
    if (input.type === 'text') { 
     // If the value is correct, increase the counter 
     if (input.value.length > 0) { 
      count++ 
     } 
     // If the 4 inputs have increased the counter, it's alright! 
     if (count === 4) { 
      document.getElementById('submit-button').disabled = false 
     } 
    } 
} 

을 그리고 지금이 코드는 있었다 . @Esailija에 의해 제안하고, 이 방법으로 더 깨끗하지만, 그것은 또한 필요 ES5-Shim합니다 (every 방법) :

document.getElementById('form-id').onkeypress = function(e) { 
    var inputs = [].slice.call(this.querySelectorAll('[type=text]')); 
    document.getElementById('submit-button').disabled = !inputs.every(function(input){ 
     return !!input.value; 
    }); 
} 

0 (이 사람, 그냥 그에게 주신 말씀하지 않는 경우) 당신은 폼 내용의 진행 상황을 모니터 할 수있는 방법을 찾을 수 있습니다 this jsfiddle에서

Answer 2

가능하면 코드를 다시 발명하는 대신 jquery 유효성 검사 플러그인을 사용하십시오. http://docs.jquery.com/Plugins/Validation은 사용하기가 쉽습니다.

Answer 3

. 모든 필드 조건이 충족되면 제출 단추가 표시됩니다. 아마 그것은 당신에게 유용 할 것입니다. 당신의 데이터가 특정 요구 사항을 준수 할 필요가 있다면 양식의 클라이언트 측 검사가 변경 될 수 있으므로 서버 측 검사도 항상 필요합니다. 즉, 클라이언트 측 형식 검사는 유용성 향상에 불과합니다.

Answer 4

몇 가지 방법이 있습니다. 하나는 버튼을 사용하도록 설정하고 자바 스크립트를 사용하여 제출시 양식 데이터의 유효성을 확인하는 것입니다. 이점은 사용자가 제출을 클릭하고 데이터 유효성을 확인할 때 (적어도 내가하는 경우) 유효성 검사 코드가 한 번만 실행된다는 것입니다.

function validateForm() { 
    var formElement = document.forms[0]; // you didn't give me a name 
    for(var i = 0, l = formElement.elements.length; i < l; i++) { 
     if(formElement.elements[i].value.length === 0) { 
     return false; 
     } 
     return true; 
    } 
} 

다른 방법은 각 입력 및 onblur (포커스가 손실)의 유효성을 검사 할 라이브 검증이다. 이 방법은 어떤 값이 나쁜지 실시간으로 사용자에게 알려주는 이점이 있지만 양식 요소의 수와 수표를 소개하는 방법에 따라 매우 무거운 자원이 될 수 있습니다.

개인적으로 나는 첫 번째 제안과 함께 갈 것입니다. 그러나 각 요소를 검증하기 위해 선택하는 경우 말했다와,이 같은 할 것 :

var formElement = document.forms[0]; // you didn't give me a name 
    for(var i = 0, l = formElement.elements.length; i < l; i++) { 
     formElement.elements[i].addEventListener('blur', function() { 
      if(this.value.length === 0) { 
       alert('this input is invalid'); 
      } 
     }, false); 
    } 

후자의 방법은 또한 당신이 양식을 제출시 유효 여부를 결정하기 위해 '국가'변수에 개최 요구 , 또는 모든 값을 다시 확인하십시오.

희망 사항에 약간의 빛이 비추어지기를 바랍니다. 코드 예제가 도움이되기를 바랍니다.