1

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

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

<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>

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

感谢读到这里的任何人。

编辑：多做一些环顾四周，似乎警报被认为是不好的做法。这是真的？有没有其他方法可以让用户知道元素是否为空？

4

3 回答 3

1

您可以使用像 EdSF 提到的 jQuery Validate （或类似的），或者您可以将提交按钮更改为常规按钮，当单击它时，它会调用一个函数来验证您的字段，如果不是空的，请提交表单。我没有测试过下面的代码，但你明白了。

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');
  }
}
于 2013-01-10T00:03:32.020 回答
0

使用 jQuery，您可以完成您想做的所有事情。jQuery 非常容易学习。这是使用 jQuery 的代码示例：

这是您可以做的一个非常简单的示例。

 <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$('#entry_0').blur(function()
{
var Fullname = $(this).val();
$('#nameresult').css("display","none");
if(Fullname.length>0)
    {
    $('#nameresult').css("display","inline-block");
    $('#nameresult').css("color","#00BB00");
    $('#nameresult').html("Valid")
    return true;
    }
    $('#nameresult').css("display","inline-block");
    $('#nameresult').css("color","#ff0000");
    $('#nameresult').html("Input Needed")
    $(this).focus();
    return;    
    });


$('#entry_1').blur(function()
{
var Companyname = $(this).val();
$('#companyresult').css("display","none");
if(Companyname.length>0)
    {
    $('#companyresult').css("display","inline-block");
    $('#companyresult').css("color","#00BB00");
    $('#companyresult').html("Valid")
    return true;
    }
    $('#companyresult').css("display","inline-block");
    $('#companyresult').css("color","#ff0000");
    $('#companyresult').html("Input Needed")
    $(this).focus();
    return;    
    });

  });

</script>
  </head>
  <body>
<form >
FULL NAME:<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
<div id="nameresult" style="display: none;"></div>
<br>

COMPANY NAME:<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
<div id="companyresult" style="display:none;"></div>
<br>

EMAIL ADDRESS:<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"><br>

Your Request:<textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea><br><br>

<input class="submitbuttons" type="submit" name="submit" value="SUBMIT" src="" border="0" />

    </form>
  </body>
</html>

请原谅代码格式，我输入得很快。

这是jQuery的链接

于 2013-01-10T00:25:26.877 回答
0

这是我在电子邮件加密网站上使用的工作模型：http: //jsfiddle.net/2b6d5/46/

随意添加，更改它...在这里发布任何分叉/更新。:)

/*
 * validate an e-mail address by leveraging the HTML5
 * input element with type "email"
 */

function validate() {
  var input = document.createElement('input');
  input.type='email';
  input.value=document.getElementById('valid').value;

  if (input.checkValidity()) {
    document.getElementById('address').style.background = 'green';
  } else {
    document.getElementById('address').style.background = 'red';
  }

  return false;
}

function val2(){
      var input = document.createElement('input');
  input.type='email';
  input.value=document.getElementById('valid').value;
    if (input.checkValidity()) {
    return true;
  } else {
    alert("Not a valid e-mail address");  
    return false;
}
}
于 2014-09-23T11:40:40.357 回答