필수 필드가 채워질 때까지 양식 제출 버튼을 사용하지 마십시오.

Question

안녕하세요 유효성을 검사하려면 아래 양식을 작성하십시오. 양식에 세 개의 텍스트 상자와 확인란이 있습니다. 세 개의 텍스트 상자가 모두 비어 있지 않은 것처럼 양식의 유효성을 검사하고 싶습니다. 체크 상자 상자에서 하나를 선택해야합니다. jvery 아래에 시도했지만 havdate 형식이 아닙니다.

<form id="cadandrivit" name="cadandrivit" method="post" action="<?php echo $this->getUrl('revitgallery/index/download')?>"> 
    <ul class="form-list"> 
     <li><label for="firstname" class="required"><em>*</em>Name:</label> 
      <div class="input-box"> 
       <input name="firstname" id="firstname" title="Contact Name" value="" type="text" class="input-text checkboxfile required-entry" /> 
      </div></li> 
     <li><label for="company" class="required"><em>*</em>Company Name:</label> 
      <div class="input-box"> 
       <input name="company" id="company" title="Company Name" value="" type="text" class="input-text checkboxfile required-entry" /> 
      </div></li> 
     <li><label for="email" class="required"><em>*</em>Email:</label> 
      <div class="input-box"> 
       <input name="email" id="email" title="E-Mail" value="" type="text" class="input-text checkboxfile required-entry" /> 
      </div></li> 
     <li class="cf"> 

      <div class="cadrivit_checkbox"> 
       <span><input type="checkbox" value="DoorCavitySliderCriterionIndustriesCascadeArtesian_11089.zip" name="Cascade Sliding Systems - Revit[]">Artesian - Revit</span> <span><input 
        type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Campaspe_60845.zip" name="Cascade Sliding Systems - Revit[]">Campaspe - Revit</span> <span><input 
        type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Glacier-Frameless_57288.zip" name="Cascade Sliding Systems - Revit[]">Glacier Frameless - Revit</span> 

       <span><input type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Oxbow_89345.zip" name="Cascade Sliding Systems - Revit[]">Oxbow - Revit</span> <span><input 
        type="checkbox" value="Door-Cavity-Slider-Criterion-Industries-Cascade-Tanaro_34537.zip" name="Cascade Sliding Systems - Revit[]">Tanaro - Revit</span> <span><input 
        type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Amazon_63391.zip" name="Cascade Sliding Systems - Revit[]">Amazon - Revit</span> <span><input 
        type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Atlantic_79142.zip" name="Cascade Sliding Systems - Revit[]">Atlantic - Revit</span> <span><input 
        type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Niagara_99081.zip" name="Cascade Sliding Systems - Revit[]">Niagara - Revit</span> <span><input 
        type="checkbox" value="Door-Face-Slider-Criterion-Industries-Cascade-Panama_89704.zip" name="Cascade Sliding Systems - Revit[]">Panama - Revit</span> <span><input 
        type="checkbox" value="Window-Face-Slider-Criterion-Industries-Cascade-Miami-120_71561.zip" name="Cascade Sliding Systems - Revit[]">Miami - Revit</span> 

      </div> 
     </li> 
    </ul> 
    <button id="cadandrivitbutton" disabled="true" type="submit" title="Download" class="button"> 
     <span><span>Download</span></span> 
    </button> 
</form> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('.checkboxfile').keyup(function() { 
      if ($(this).val().length == 0) 
       $('#cadandrivitbutton').attr('disabled', true); 
     }) 
     $('input:checkbox').click(function() { 
      var buttonsChecked = $('input:checkbox:checked'); 
      if (buttonsChecked.length) { 
       $('#cadandrivitbutton').removeAttr('disabled'); 
      } else { 
       $('#cadandrivitbutton').attr('disabled', 'disabled'); 
      } 
     }); 
    }); 
</script> 

Answer 1

나를 위해 협력 EDIT 3 JSFIDDLE

*** 참고 :이 시도 *

를 추가 할 필요가 이메일 확인,

$(function() { 
    $('.checkboxfile').keyup(function(){ 
     var isCheckedCB = false; 

     $('input:checkbox').each(function(){ 
      if($(this).is(':checked')){ 
       isCheckedCB = true; 
       } 
     });  

     if($('#firstname').val()=='' || $('#company').val()=='' || $('#email').val()=='' || !isCheckedCB) 
      $('#cadandrivitbutton').attr('disabled', true); 
     else 
      $('#cadandrivitbutton').attr('disabled', false); 

    }) 
$('input:checkbox').click(function() { 
     var buttonsChecked = $('input:checkbox:checked'); 
     if (buttonsChecked.length && $('#firstname').val()!='' && $('#company').val()!='' && $('#email').val()!='') { 
      $('#cadandrivitbutton').removeAttr('disabled'); 
      } 
     else { 
      $('#cadandrivitbutton').attr('disabled', 'disabled'); 
      } 
     }); 
    }); 

Answer 2

I가 jQuery를 사용합니다 양식 제출을 캡처하고, 필요한 필드를 확인하고, 사용자가 무언가를 수정해야하는 경우 경고를 표시하십시오. 제출 핸들러에서 false를 반환하면 양식이 제출되지 않습니다. 단추를 비활성화하거나 경고를 표시 할 수 있습니다.

$('#cadandrivit').submit(function() { 
    if (!condition1 || !condition2) { 
    alert('warning to user, etc.'); 
    return false; 
    } 
    // all good 
    return true; 
})