jQuery를 사용하여 입력이 비어 있는지 확인하십시오. 다음 채워지지 않으면 빨간색 배경을

모든 필드를 채우려는 양식이 있습니다. 필드를 클릭 한 다음 채워지지 않으면 빨간색 배경을 표시하고 싶습니다.

내 코드는 다음과 같습니다.

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

채워지는 필드와 상관없이 경고 클래스를 적용합니다.

내가 무엇을 잘못하고 있지?

답변

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

그리고 당신은 반드시 필요하지 않습니다 .length또는 그것의 있는지 >0당신이 가독성을 목적으로하고 싶은 경우는 false 어쨌든에 빈 문자열 평가하여 이래로 :

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

항상 텍스트 필드 요소에서 작동한다고 확신하면을 사용할 수 있습니다 this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

또한 $('input:text')여러 요소를 가져 오거나 컨텍스트를 지정하거나 this고독한 요소에 대한 참조를 원할 경우 (컨텍스트의 자손 / 자식에 하나의 텍스트 필드가있는 경우) 키워드를 사용 한다는 점에 유의해야 합니다.

답변

모두가 올바른 생각을 가지고 있지만, 나는 좀 더 명확하고 가치를 정돈하는 것을 좋아합니다.

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

.length를 사용하지 않으면 ‘0’항목이 불량으로 표시 될 수 있으며 $ .trim없이 5 개의 공백 항목이 ok로 표시 될 수 있습니다. 행운을 빌어 요.

답변

흐림 효과로하는 것이 너무 제한적입니다. 양식 필드에 초점이 있다고 가정하므로 제출시 입력을 통해 매핑하는 것을 선호합니다. 수년간 화려한 흐림, 초점 등의 트릭을 다루고 나면 더 단순하게 유지하면 유용성을 높일 수 있습니다.

$('#signupform').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents('td').addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).parents('td').removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
    // do the ajax..    
});

답변

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

답변

당신은 또한 사용할 수 있습니다 ..

$('#apply-form input').blur(function()
{
    if( $(this).val() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

공백이 의심되면 다음을 시도해보십시오.

$('#apply-form input').blur(function()
{
    if( $(this).val().trim() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

답변

아무도 언급하지 않은 방법

$(this).filter('[value=]').addClass('warning');

나에게 더 jquery 같은 것 같다

답변

키 업 이벤트는 사용자가 상자를 지웠는 지 감지합니다 (즉, 백 스페이스는 이벤트를 발생 시키지만 백 스페이스는 IE에서 키 누르기 이벤트를 발생시키지 않습니다)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});