2011-11-06 1 views
1

필자는 필수 필드가 채워질 때까지 양식 제출 버튼을 비활성화하는 솔루션을 찾고있었습니다. stackoverflow (mblase75 호의)에서 뭔가를 발견했지만 표준 jQuery 용이며 jQuery Mobile에서는 작동하지 않습니다.
필드가 jQuery Mobile으로 채워질 때까지 양식 제출 단추를 비활성화하는 방법은 무엇입니까?

이유는 모바일 페이지에 제출하기 전에 모든 필드를 채워야하는 양식이 있기 때문입니다. 유효성 검사는 PHP를 통해 해결되므로 필요한 부분이 아닙니다.

$(document).ready(function() { 
    $form = $('#formid'); // cache 
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn 
    $form.find(':input').change(function() { // monitor all inputs for changes 
     var disable = false; 
     $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values 
      if ($.trim(el.value) === '') { 
        disable = true; // disable submit if any of them are still blank 
      } 
     }); 
     $form.find(':input[type="submit"]').prop('disabled',disable); 
     }); 
    }); 

슬프게도 나는 jQuery를 전문가가 아니에요, 가능하면 나는이 몇 가지 도움을 싶습니다. 다른 제안 사항도 환영합니다 (jQuery 모바일을 사용한 유효성 검사에도 해당).

+0

http://stackoverflow.com/questions/5854580/jquerymobile-button/5862415#5862415 –

+0

그것은 솔루션의 일부하지만 버튼이 비활성화됩니다, 작업 부분 만 한 번 활성화되지 않습니다 관련 양식이 완료되었습니다. – Aznim

+0

또한 jQuery 버전 : jQuery : 1.6.4 jQuery 모바일 : 1.0RC2 – Aznim

답변

1
$(function() { 
    var form = $('#formid'); 
    var submitBtn = $('#submitBtnId'); 

    submitBtn.addClass('disable'); 

    form.submit(function() 

     if(validate()) { 
      submitBtn.removeClass('disable'); 
     } 

     if(submitBtn.hasClass('disable')) { 
      return false; 
     } 

     else { 
      return true; 
     } 

    }); 

    function validate() { 
     form.find('input, textarea').change(function(){ 
      // validation goes here if all inputs are validate then return true otherwise false 
     }); 
    } 
}); 
0

실제로 [입력 = "버튼"] 또는 입력 [유형 = "재설정"]과 같은 다른 "버튼"의 값을 확인하고있을 수 있습니다. 값이 설정되어 있지 않으면 공백 값이 있습니다. 다음은이에 대한 코드 계정 (플러스 몇 가지 더 캐싱 문) :

$(document).ready(function() { 
    var $form = $('#formid'), // cache 
     $inputs = $form.find(':input'), // MOD extra caching 
     $buttons = $inputs.not(':submit, :reset, :button'), 
     $fields = $inputs.not($buttons), 
     $submits = $buttons.filter(':submit'); 

    $submits.prop('disabled', true); // disable submit btn 
    $fields.keyup(function() { // monitor all inputs for changes, MOD changed to keyup 
     var disable = false; 
     $fields.each(function(i, el) { // test all inputs for values 
      if ($(el).val() === '') { // MOD use jQuery to get value 
        disable = true; // disable submit if any of them are still blank 
        return false; // MOD stop "each" if even one field is blank... less waste 
      } 
     }); 
     $submits.prop('disabled',disable); 
     }); 
}); 

그러나 이것은 아무것도 확인되지 않았다 라디오 버튼 그룹을 차지하지 않습니다.

관련 문제