JavaScript 检查空表单元素，如果为空则拒绝提交，发送警报消息

Question

所以我一直在查看代码并看看通过 javascript 可以实现什么。我有一个代码当前检查表单是否有空元素，如果有空元素则拒绝提交。问题是我尝试在元素为空时添加警报，在元素不为空时添加警报，但它不起作用。我似乎对java脚本了解不够，无法编辑它。

这是表格。忽略奇怪的类和 div 名称，它们是这样设置的，因为表单提交到 Google 文档电子表格。

<form class="quickemailform" action="https://docs.google.com/spreadsheet/formResponse?formkey=dGp3YUxCTGtWd251ZXVfOEtwc1hhWVE6MQ&amp;ifq" method="post" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form" name="frm1" onsubmit="InputChecker()">
        <br>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_0">
                    <font class="formtitles">FULL NAME:</font>
                    </br>
                    <label class="ss-q-help" for="entry_0"></label>
                    <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_1">
                        <font class="formtitles" id="compnam">COMPANY NAME:</font>
                        </br>
                    <label class="ss-q-help" for="entry_1"></label>
                    <input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_2">
                        <font class="formtitles"  id="emailadd">EMAIL ADDRESS:</font>
                        <br>
                    <label class="ss-q-help" for="entry_2"></label>
                    <input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-paragraph-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_3">
                        <font class="formtitles"  id="request">Your Request:</font>
                        <font class="fineprint">( SUMMARIZE IMPORTANT DETAILS )</font>
                        <br>
                    </label>
                    <label class="ss-q-help" for="entry_3"></label>
                    <textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea>
                </div>
            </div>
        </div>
            <input type="hidden" name="pageNumber" value="0">
            <input type="hidden" name="backupCache" value="">

        <div class="ss-item ss-navigate"><div class="ss-form-entry">
                <input class="submitbuttons" type="submit" name="submit" value="&nbsp;" src="" border="0" onclick="myFunction()"  />
            </div>
        </div>
    </form>

如果任何字段为空，这里的 javascript 将拒绝提交表单。这段代码是我网上找的，不是我自己写的。它已经过测试并且可以工作，但我希望它能做的不仅仅是拒绝提交。

<script type="text/javascript">

              (function() {
        var divs = document.getElementById('ss-form').
        getElementsByTagName('div');
        var numDivs = divs.length;
        for (var j = 0; j < numDivs; j++) {
        if (divs[j].className == 'errorbox-bad') {
        divs[j].lastChild.firstChild.lastChild.focus();
        return;
        }
        }
        for (var i = 0; i < numDivs; i++) {
        var div = divs[i];
        if (div.className == 'ss-form-entry' &&
        div.firstChild &&
        div.firstChild.className == 'ss-q-title') {
        div.lastChild.focus();
        return;
        }
        }
        })();
    </script>

如果可能的话，我想知道如何在表单被拒绝或接受时添加警报。另外，如果表格被拒绝，我想要它，这样我就有类似的东西

<font class="asterick" div="your_name_ast">*</font>   or   <font class="asterick" div="company_name_ast">*</font>

如果表单被拒绝且未提交，则在每个空元素旁边显示星号。例如让表单检查每个元素是否为空。如果脚本发现该元素为空，则会弹出一条警告，提示“表单未填写。请检查所有带有 * 的元素。”然后就会出现星号。

感谢所有阅读本文的人。

编辑:多看看周围，似乎警报被认为是不好的做法。这是真的？我是否可以通过其他方式让用户知道元素是否为空？

Answer 1

您可以使用 jQuery Validate(或类似的)，如 EdSF 提到的，或者您可以将提交按钮更改为常规按钮，单击该按钮时，它会调用一个函数来验证您的字段，如果非空，则提交表单。我尚未测试以下代码，但您已经明白了。

function validateForm(){
  var isValid = true;

  var elements = document.getElementById('ss-form').getElementsByTagName('input');

  for(var i=0; i < elements.length; i++){
    if(elements[i].value.length < 1){
      isValid = false;
    }
  }

  if(isValid){
    document.getElementById('ss-form').submit();
  }
  else {
    alert('Please fill all required fields');
  }
}