Question

你好我有以下表格来验证。表单有三个文本框和复选框我要验证表单，就像所有三个文本框都不为空，并且从复选框中必须选中其中一个以启用表单提交按钮我在jquery下面试过但是没有valdate形式。

<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

我会使用jQuery捕获表单提交，检查您需要的字段，并在用户必须更正某些内容时显示警告。从提交处理程序返回false将阻止表单提交。您可以禁用按钮，显示警报，无论您需要什么。

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

禁用表单提交按钮，直到不填充必填字段

2 个答案: