양식에서 필요한 모든 입력이 비어 있지 않은지 확인하십시오.

Question

POST 및 입력이 30 개인 간단한 양식을 상상해보십시오.

제출 버튼에서 호출 할 jQuery 함수를 만들고 싶습니다. 필자는 필요한 모든 입력을 검사하는 방법을 조사했지만 도움이 될만한 것을 찾지 못했습니다.

var inputs_required = all inputs from my form which have attribute required; 
function check_required_inputs() { 
    if(inputs_required != "") { 
    //create ajax with serialize() and submit form; 
    } 
} else { 
    //highlight inputs that are empty and show a message; 
} 

이이 jQuery를 달성 할 수 있습니다

나는 이런 식으로 뭔가를하고 싶은

? 이 도움이

function check_required_inputs() { 
    $('.required').each(function(){ 
     if($(this).val() == ""){ 
      alert('Please fill all the fields'; 

      return false; 
     } 
    }); 
}); 

희망 :

Answer 1

당신은 모든 필요한 입력을 공통 클래스 (예를 들어 required)를 좋아하는 그들을 통해 루프 each()를 사용을 줄 수 있습니다.

Answer 2

Zakaria는 이미 답변을 게시 했으므로 훌륭하게 작동합니다. 대신 사용자 정의 클래스를 필요없이 또는 대신

$('input,textarea,select').filter('[required]:visible') 

를 사용하여 속성 required을 가지고 visible 모든 input, textarea 및 select 요소를 찾을 수 그리고 사용하여 반복 each() 등

Answer 3

jQuery('button').on('click', function() { 
 
    jQuery('input:invalid').css('background-color','red'); 
 
    jQuery('input:valid').css('background-color','green'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="text" required="true" /> 
 
</form> 
 
<button>click</button>

당신은 단순히 입력한다줄속성의 경우 빈 입력 필수 입력은 모두 의사 클래스 :invalid입니다.

jQuery('input:invalid')은 모든 잘못된 입력 목록을 제공합니다. .length은 길이가 0보다 큰 경우 해당 양식의 길이를 알려주며 귀하의 양식은 유효하지 않습니다.

Answer 4

당신이 양식 양식 액션의 ID이 있다고 가정 제출 ID 형상 - 의 제출 '버튼을 시도 할 수 있습니다.

var submitButton = $('#form-submit'), 
    formContainer = $('#form-action'); 

    submitButton.on('click',function(e){ 
     e.preventDefault(); 
     formContainer.find('input').each(function(index,ele){ 
     if(ele.value === null || ele.value === ''){ 
      var error = " the " + ele.name + " field is requird "; 
       ele.after(error); 
      } 
    }); 
}); 

Answer 5

또한 모든 입력 검증을 만족 true에만 경우 반환하거나 false, 그렇지 않은 경우 것 중 하나 반복 가능한 기능, every()을 활용할 수

:

function check_required_inputs() { 
    var valid = Array.prototype.every.call($('.required'), function(input) { 
    return input.value; 
    }); 

    if (valid) { 
    return true; 
    } else { 
    alert('Please fill all the fields'); 

    return false; 
    } 
}