양식이 완료되지 않은 경우 jquery

Question

모든 입력란에 값이 있는지 알아야하고 입력 한 경우 제출 버튼을 활성화하고 싶습니다.

플러그인을 살펴 봤지만 필요한 플러그인이 하나도 없습니다. 또는 사용해야합니다.

양식은 입력, 텍스트 상자 및 드롭 다운 선택을 사용합니다.

Answer 1

당신이 (참고 :이 테스트를하지 않은 경우) : 같은 간단한 뭔가 할 수있는 플러그인을 사용하지 않는 경우 일부 이벤트에

/** 
* Checks to see if all of the values in a form are filled in. 
* 
* @param formId String the id of the form to check (without the #) 
* @return boolean True indicates all form fields are filled in 
*/ 
function checkForm(formId){ 

    var isFormComplete = true; 

    $('#' + formId).find('input,select,textarea').each(function(){ 
     var formValue = jQuery.trim($(this).val()); 

     if(!formValue){ 
      isFormComplete = false; 
     } 
    }); 

    return isFormComplete; 
} 

다음을 (아마 focus 또는 blur) 이 함수를 호출하고 반환 값에 따라 제출 단추를 토글합니다.

Answer 2

jquery를 사용하여 id를 통해 원하는 컨트롤을 선택할 수 있습니다. 본질적으로 당신에게 블랙 박스가 될 수있는 플러그인을 지원하는 데 이것을 통해 제안합니다.

태그 :

<input type="text" id="myTextBox" /> 
<input type="text" id="x" /> 
<select id="y" /> 

JQuery와 :

var valid = $("#myTextBox").val() != "" && 
      $("#x").val() != "" && 
      $("#y").selectedIndex != 0; // if zero would be invalid for a select... 

활성화/당신의 제출 버튼이 유효에 따라 해제 할 수 있습니다.

Answer 3

var $submit = $('#a-form').find('input[type="submit"]'), 
    $inputs = $('#a-form').find('input, textarea').not('[type="submit"], [type="hidden"]'); 
$inputs.on('change', function() { 
    var error = false; 
    $.each($inputs, function (index, element) { 
     if ($(this).val() == '') { 
      error = true; 
      $(this).css({ backgroundColor : 'red' }); 
     } else { 
      $(this).css({ backgroundColor : 'white' }); 
     } 
    }); 
    if (error) { 
     $submit.prop('disabled', true); 
    } else { 
     $submit.prop('disabled', false); 
    } 
});​ 

이것은 어떤 비어 있으면 형태로 각각의 입력 값을 확인하는 change 이벤트의 형태 다음 버튼이 비활성화 제출 입력에 대한 이벤트 핸들러를 결합한다. 빈 입력의 background-color을 red으로 변경합니다. 무엇에 대한 [Validate.JS] (http://rickharrison.github.com/validate.js/)를 http://jsfiddle.net/2zjbM/1/