JS验证错误

时间：2018-05-04 07:42:29

标签： javascript validation textbox

我的文本框验证出了问题。 我想要得到这样的东西。

单击按钮，在未填写内容时发出消息，当您填写空文本框时，该文本框的1条消息应该消失。

如果再次单击该按钮，使用1个空文本框，则只显示该文本框的消息。

如果你点击它两次没有填充，它应该只出现一次......

我在这里搞砸了什么...... 有人可以让我再次上场吗？

提前谢谢！

var list2 = [];
function valideer(el) {
 
    divOutput = document.getElementById("msgbox1");
    var strValideer = "<ul>";

    if (document.getElementById("naam").value === "") {
        list2.push("naam");
    } if (document.getElementById("voornaam").value === "") {
        list2.push("voornaam");
    } if (document.getElementById("straatnr").value === "") {
        list2.push("straatnr");
    } if (document.getElementById("postgem").selectedIndex === 0) {
        list2.push("postgem");
    } if (document.getElementById("telgsm").value === "") {
        list2.push("telgsm");
    } if (document.getElementById("email").value === "") {
        list2.push("email");
    }

    for (var i = 0; i < list2.length; i++) {
        strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
    }
    strValideer += "</ul>";
    divOutput.innerHTML = strValideer;
}

function inputChange(el) {
    divOutput = document.getElementById("msgbox1");
    strValideer = "<ul>";
    var naam = document.getElementById("naam").value;
    if (naam !== "") {
        list2.splice(list2.indexOf(el.name), 1);
    }
    for (var i = 0; i < list2.length; i++) {
        strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
    }
    strValideer += "</ul>";
    divOutput.innerHTML = strValideer;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   
    <link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
    <!--lay-out met bootstrap grid-->
    <link href="style.css" type="text/css" rel="stylesheet" />
    <script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
    <section class="container" id="userform">
        <form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="return validate(this)" oninput="inputChange(this)">
            <fieldset>
                <legend>Persoonlijke gegevens</legend>
                <div class="container">
                    <div class="row">
                        <div class="span7">
                            <div class="control-group">
                                <label class="control-label" for="naam">naam:</label>
                                <div class="controls">
                                    <input type="text" id="naam" name="naam" placeholder="naam" required onsubmit="valideer(this)" onclick="inputChange(this)">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="voornaam">voornaam:</label>
                                <div class="controls">
                                    <input type="text" id="voornaam" name="voornaam" placeholder="voornaam"  required onsubmit="valideer(this)" onclick="inputChange(this)">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="straatnr">straat+nr:</label>
                                <div class="controls">
                                    <input type="text" id="straatnr" name="straatnr" placeholder="straat+nr"  required onsubmit="valideer(this)" onclick="inputChange(this)">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="postgem">post+gem:</label>
                                <div class="controls">
                                    <select id="postgem" required onsubmit="valideer(this)" onclick="inputChange(this)">
                                        <option value="">-- maak een keuze --</option>
                                        <option value="2000">2000 Antwerpen</option>
                                        <option value="9000">9000 Gent</option>
                                        <option value="9300">9300 Aalst</option>
                                        <option value="9400">9400 Ninove</option>
                                        <option value="9450">9450 Haaltert</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="telgsm">tel/gsm:</label>
                                <div class="controls">
                                    <input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm"  required onsubmit="valideer(this)" onclick="inputChange(this)">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="email">email:</label>
                                <div class="controls">
                                    <input type="email" id="email" name="email" placeholder="e-mail"  required onsubmit="valideer(this)" onclick="inputChange(this)">
                                </div>
                            </div>
                            <!--einde span7-->
                        </div>
                        <div class="span4 valid">
                            <div id="msgbox1" class="alert alert-error">
                                <div class="span1">

                                    </div>
                                </div>
                            </div>
                        <div class="span1">
                            <div class="span1">
     
                            </div>
                            <!--einde row-->
                        </div>
                    <!--einde container-->
                </div>
                    </div>
            </fieldset>
          
            <fieldset>
               
                <div class="container">
                    <div class="row">
                        <div class="span7">
                            <div class="control-group">
                            
                                <div class="controls">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
                            </div>
                        </div>
                        <div class="span4 valid">
                            <div id="msgbox3" class="alert alert-success"></div>
                        </div>
                        <div class="span1"><!--lege kolom--></div>
                        <!--einde row-->
                    </div>
                    <!--einde container-->
                </div>
            </fieldset>
        </form>
    </section>
    <footer class="container">
        <p>&copy; 2013 The Wood Factory </p>
    </footer>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

我觉得你的方法比它需要的要复杂一点..看下面我的尝试

function valideer(current) {
  var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
  var str = '<ul>';
  ids.forEach(function(id) {
    var el = document.getElementById(id);
    if (el.value === '' && el !== current) {
      str += "<li><b>" + id + ": </b>verplicht veld</li>";
    }
  });
  str += '</ul>';
  var outputDiv = document.getElementById("msgbox1");

  outputDiv.innerHTML = str;
}

function handleFormSubmit(ev) {
  ev.preventDefault();
  valideer();
  return false;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
  <!--lay-out met bootstrap grid-->
  <link href="style.css" type="text/css" rel="stylesheet" />
  <script src="woodfactory.js" type="text/javascript"></script>
</head>

<body>
  <section class="container" id="userform">
    <form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="handleFormSubmit">
      <fieldset>
        <legend>Persoonlijke gegevens</legend>
        <div class="container">
          <div class="row">
            <div class="span7">
              <div class="control-group">
                <label class="control-label" for="naam">naam:</label>
                <div class="controls">
                  <input type="text" id="naam" name="naam" placeholder="naam" required onclick="valideer(this)">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="voornaam">voornaam:</label>
                <div class="controls">
                  <input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onclick="valideer(this)">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="straatnr">straat+nr:</label>
                <div class="controls">
                  <input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onclick="valideer(this)">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="postgem">post+gem:</label>
                <div class="controls">
                  <select id="postgem" required onclick="valideer(this)">
                    <option value="">-- maak een keuze --</option>
                    <option value="2000">2000 Antwerpen</option>
                    <option value="9000">9000 Gent</option>
                    <option value="9300">9300 Aalst</option>
                    <option value="9400">9400 Ninove</option>
                    <option value="9450">9450 Haaltert</option>
                  </select>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="telgsm">tel/gsm:</label>
                <div class="controls">
                  <input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onclick="valideer(this)">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="email">email:</label>
                <div class="controls">
                  <input type="email" id="email" name="email" placeholder="e-mail" required onclick="valideer(this)">
                </div>
              </div>
              <!--einde span7-->
            </div>
            <div class="span4 valid">
              <div id="msgbox1" class="alert alert-error">
                <div class="span1">

                </div>
              </div>
            </div>
            <div class="span1">
              <div class="span1">

              </div>
              <!--einde row-->
            </div>
            <!--einde container-->
          </div>
        </div>
      </fieldset>

      <fieldset>

        <div class="container">
          <div class="row">
            <div class="span7">
              <div class="control-group">

                <div class="controls">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                </div>
              </div>
              <div class="form-actions">
                <button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
              </div>
            </div>
            <div class="span4 valid">
              <div id="msgbox3" class="alert alert-success"></div>
            </div>
            <div class="span1">
              <!--lege kolom-->
            </div>
            <!--einde row-->
          </div>
          <!--einde container-->
        </div>
      </fieldset>
    </form>
  </section>
  <footer class="container">
    <p>&copy; 2013 The Wood Factory </p>
  </footer>
</body>

</html>

一些注意事项和观察：

  1. 由于唯一用于验证的检查是否包含空字符串，因此我将valideer函数概括为迭代并对给定的id数组进行操作。通过使用DOM查询查询表单上的输入并按此处理它，可以做得更好。
  2. 您在dom中添加了许多内联事件处理程序。其中一些是多余的，并不是真正需要的。例如，在表单元素上使用simgle onsubmit就足够了（不需要为表单内的每个输入添加它）
  3. 您使用的是全局变量list2这是每次单击按钮时导致重复输入的原因。本地化范围将解决（通过在函数内移动）

答案 1 :(得分：0)

您已经使用required属性，这意味着您不再需要js函数来验证输入是否为空。

您还应该注意到list2是一个全局变量，这意味着您应该在每次valideer()调用结束时清除它。

总而言之，你的代码看起来非常冗长......试着找到一种更好的方式来表达你的需求。

相关问题
最新问题