입력 내용이 비어있는 경우 제출 불가 jquery

Question

면책 조항 : 본인의 특별한 경우에 도움이 필요하지만이 주제와 관련하여 몇 가지 질문이 있으며 해결 방법이 많이 있음을 알고 있습니다.

키 입력시 입력 값이 비어 있는지 확인하고 제출 버튼을 사용하지 않도록 설정하려고합니다.

내 HTML 코드 : 나는 약간의 수정을 here에서 예를 들어 답을 사용한

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" /> 
    </div> 
    </form> 
</div> 

: 어떤 도움을 크게 감상 할 수

(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', true); 
     } else { 
      $('.actions input').attr('disabled', false); 
     } 
    }); 
})() 

!

Answer 1

기본적으로 버튼을 사용하지 않는 것이 좋습니다. 나는 또한 .val()의 길이를보고 빈 문자열을 확인하지 않을 것입니다. 마지막으로, 나는 document.ready() 훨씬 더 읽기 기존 코드보다 생각 :

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" disabled="disabled" /> 
    </div> 
    </form> 
</div>​ 

JS/jQuery를

$(document).ready(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val().length == 0) { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', 'disabled'); 
     } else { 
      $('.actions input').removeAttr('disabled'); 
     } 
    }); 
}); 

여기 a working fiddle의

HTML : 여기에 전체 코드입니다.

Answer 2

내 프로젝트에서 이것을 사용하면 성공합니다.

$(document).ready(function() { 
    $('.field').keyup(function() { 

    var empty = false; 
    $('.field').each(function() { 
     if ($(this).val().length == 0) { 
      empty = true; 
     } 
    });     

    if (empty) { 
     $('.actions[type="submit"]').attr('disabled', 'disabled'); 
    } else { 
     $('.actions[type="submit"]').removeAttr('disabled'); 
    }     
    }); 
});