如果所有字段未完成，则 jquery/javascript 警报答案

【问题标题】：jquery/javascript alert if all fields are not completed如果所有字段未完成，则 jquery/javascript 警报
【发布时间】：2009-09-22 01:32:20
【问题描述】：

我有一个表格，如果所有字段都未填写，我想提醒人们。我目前正在对必填字段使用 jquery 验证脚本，但我还需要它让人们知道在保存之前并非所有字段都已填写（它们不是必填字段，只是为了让他们知道表单还没完）。

表单域是：

类型、状态、评级、cterms、companyid、公司、姓名、姓氏、地址、郊区、城市、州、国家/地区、pcode、电话、电子邮件和 cmets

如果有人能帮我解决这个问题，那就太好了，我不介意它是使用 jquery 还是 javascript，只是提醒一下并非所有字段都已完成，如果他们想继续保存与否。

干杯

李安

编辑：

这是表格：

<form action="/index.php?option=com_database&view=add&Itemid=3&task=save" method="post" name="adminForm" id="adminForm">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="50%" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3">
          <tr>
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong> </strong></td>
            <td></td>
          </tr>
          <tr>
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Active:</strong></td>
            <td><table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left" valign="middle"><input type="radio" name="published" id="published0" value="0" checked="checked" /></td>
                  <td align="left" valign="middle">&nbsp;</td>
                  <td align="left" valign="middle"><label for="published0">No</label>
                  </td>
                  <td align="left" valign="middle">&nbsp;</td>
                  <td align="left" valign="middle"><input type="radio" name="published" id="published1" value="1" /></td>
                  <td align="left" valign="middle">&nbsp;</td>
                  <td align="left" valign="middle"><label for="published1">Yes</label></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Date:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap" class="admintable"><input class="text_area" type="text" name="date" id="date" size="30" value="22/09/2009" disabled="disabled" style="width: 200px;" />
            </td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Type:</strong></td>
            <td><select name="type" id="type" size="1" class="validate[required]" style="width: 205px;">
                <option value="">- Select Type -</option>
                <option value="1">Customer</option>
                <option value="2">Supplier</option>
              </select></td>
          </tr>
          <tr class="admintable">
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Status:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><select name="status" id="status" size="1" class="validate[required]" style="width: 205px;">
                <option value="">- Select Status -</option>
                <option value="1">Existing</option>
                <option value="2">Potential</option>
              </select></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Rating:</strong></td>
            <td><select name="rating" id="rating" size="1" class="validate[required]" style="width: 205px;">
                <option value="">- Select Rating -</option>
                <option value="1">Principal</option>
                <option value="2">Secondary</option>
                <option value="3">Minor</option>
              </select></td>
          </tr>
          <tr class="admintable">
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Credit Terms:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><select name="cterms" id="cterms" size="1" class="validate[required]" style="width: 205px;">
                <option value="">- Select Credit Terms -</option>
                <option value="1">COD</option>
                <option value="2">30 Days</option>
                <option value="3">60 Days</option>
                <option value="4">90 Days</option>
              </select></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Database:</strong></td>
            <td><select name="companyid" id="companyid" size="1" class="validate[required]" style="width: 205px;">
                <option value="">- Select Database -</option>
                <option value="2">Cody Opal</option>
                <option value="1">National Opal Collection</option>
              </select></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Company:</strong></td>
            <td><input class="validate[required] text_area" type="text" name="company" id="company" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address:</strong></td>
            <td><input class="validate[required] text_area" type="text" name="address" id="address" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Address 2:</strong></td>
            <td><input class="text_area" type="text" name="address2" id="address2" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Suburb:</strong></td>
            <td><input class="validate[required] text_area" type="text" name="suburb" id="suburb" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>City:</strong></td>
            <td><input class="validate[required] text_area" type="text" name="city" id="city" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>State:</strong></td>
            <td><div id="entry_state1">
                <input class="validate[required] text_area" type="text" name="state" id="state" size="30" value="" style="width: 200px;" />
              </div></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Postcode:</strong></td>
            <td><input class="validate[required] text_area" type="text" name="pcode" id="pcode" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Country:</strong></td>
            <td><select name="country" id="country" onChange="javascript: loadstate1();" class="selectstate validate[required]">
                <option value="">- Select Country -</option>
              </select></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Name:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" type="text" name="name" id="name" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Surname:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="surname" id="surname" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Position:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="position" id="position" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Primary Contact Email:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required,custom[email]] text_area" type="text" name="email" id="email" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Secondary Contact:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" type="text" name="contact" id="contact" size="30" value="" style="width: 200px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Business:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="validate[required] text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
              <input class="validate[required,custom[telephone]] text_area" type="text" name="phone_b" id="phone_b" size="22" value="" style="width: 160px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Direct:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
              <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_d" id="phone_d" size="22" value="" style="width: 160px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Mobile:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
              <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_m" id="phone_m" size="22" value="" style="width: 160px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="middle" nowrap="nowrap" class="key"><strong>Phone - Personal:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
              <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_p" id="phone_p" size="22" value="" style="width: 160px;" /></td>
          </tr>
          <tr>
            <td align="left" valign="middle" nowrap="nowrap" class="key"><strong>Fax:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><input class="text_area" name="country_code[]" type="text" id="country_code" value="+" size="2" maxlength="5" style="width: 33px;" />
              <input class="validate[optional,custom[telephone]] text_area" type="text" name="phone_f" id="phone_f" size="22" value="" style="width: 160px;" /></td>
          </tr>
          <tr>
            <td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Customer Comments:</strong></td>
            <td align="left" valign="middle" nowrap="nowrap"><textarea name="comments" id="comments" cols="30" rows="7"></textarea></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="3">
          <tr>
            <td width="160" align="left" valign="top" nowrap="nowrap" class="key"><strong>Classifications: </strong></td>
            <td><div class="company_1">
                <table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables">
                  <tr>
                    <td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[71]" id="classifications[71]" value="71" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[71]">Retailer</label></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[72]" id="classifications[72]" value="72" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[72]">Media</label></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[73]" id="classifications[73]" value="73" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[73]">Consultant</label></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[74]" id="classifications[74]" value="74" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[74]">Contractor</label></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[75]" id="classifications[75]" value="75" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[75]">Other</label></td>
                  </tr>
                </table>
              </div></td>
          </tr>
        </table></td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Add New Client" />
</form>

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

这是一个快速的模型：

$(document).ready(function() {
    $('form').submit(function() {
        var incomplete = $('form :input').filter(function() {
                             return $(this).val() == '';
                         });
        //if incomplete contains any elements, the form has not been filled 
        if(incomplete.length) {
            alert('please fill out the form');
            //to prevent submission of the form
            return false;
        }
     });
});

【讨论】：

这不会以后代为目标，特别是如果表单字段出于文体目的而用分隔符括起来。（我偷了你的评论：P）
@jnylen - 是的，我不知道表单是什么样的，但我想这可以使用祖先-后代来纠正，即“表单输入”而不是“表单>输入”。谢谢你的意见。

【解决方案2】：

function checkEmpty() {
       var empty = false;
       $("input").each(function() {
           empty = ($(this).val() == "") ? true : empty;
       });
       if(empty) {
           var empty_ok = confirm("Are you Ok with leaving stuff empty?");
           return empty_ok;
       }

如果他们点击yes，确认返回true，如果点击no，则返回false。将其作为传递给 submit() 事件的值返回给主验证器。

【讨论】：

最好使用 $(":input", myForm)。这将处理页面上的其他输入标签（文本区域等）和多个表单。（不过，捕捉其他输入标签可能更重要。）

【解决方案3】：

循环遍历表单中的每个输入元素：

$(':input', formName).each(function() {
    // Check for completion of each input type
})

【讨论】：

这不会针对后代，特别是如果表单字段出于文体目的而用分隔符括起来。
在我发表评论后，您正在查看代码的修改版本。查看初始版本。
是的，我应该这么说。这个问题在上面得到了回答，看起来是一个可靠的解决方案。

【解决方案4】：

（这就是为什么我在盲目回答之前要求标记）

我认为上述任何解决方案都不能解释只有一个复选框必须被实际选中的逻辑，并且您不应该只检查它们中的每一个是否具有值或它们默认情况下都会有一个。这是我的版本，它依赖于包含复选框的div 以具有“复选框组”类。

此外，未填充的元素将填充到“errorElements”数组中，您可以循环并添加任何警告通知。

$(function() {
$('#adminForm').submit( function ( event ) {
    var errorElements  = window.errorElements = [], valid = false;

    $(':input', this).not(':checkbox').each(function() {
    var val = $(this).val();
    if ( !val.length ) {
        valid = false;
        errorElements.push(this);
    }
    });

    $('.checkboxgroup', this).each(function() {
    var checkBoxes = $(':checkbox', this), oneChecked = false;
    checkBoxes.each(function() {
        if ( !oneChecked && !$(this).is(':checked') ) {
        valid = false;
        errorElements.push(this);
        } else {
        oneChecked = true;
        }
    });
    });

    if ( !errorElements.length ) {
    valid = true;
    }

    if ( !valid ) {
    event.preventDefault();
    alert('please fill in all form fields.');
    } else {
    alert('congratulations');
    }

});
});

复选框片段：

  <div class="company_1 checkboxgroup">
                <table width="135" border="0" cellspacing="0" cellpadding="0" align="left" style="border: solid 1px #ff0000; margin-right: 10px; background-color: #ff0000; background-image: url(/templates/home/scripts/opacity.png);" class="classTables">
                  <tr>
                    <td colspan="2" align="center" valign="middle" style="background-color: #ff0000; background-image: none; padding: 2px 2px 2px 2px;"><strong>OTHER</strong></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" width="20"><input type="checkbox" name="classifications[70]" id="classifications[70]" value="70" class="checkbox" /></td>
                    <td align="left" valign="middle"><label for="classifications[70]">VIP Client</label></td>

如果您有多个复选框组，只需使用 .checkboxgroup 类将它们括起来的元素即可。

【讨论】：