Ошибки валидации JS - PullRequest
Новая
       2

Ошибки валидации JS

0 голосов
/ 04 мая 2018

У меня проблема с проверкой текстовых полей. Я пытаюсь получить что-то вроде этого.

Нажмите на кнопку, дайте сообщение, когда что-то не заполнено, пока вы заполняете пустое текстовое поле, сообщение 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 голосов
/ 04 мая 2018

Вы уже используете свойство required, что означает, что вам больше не нужна функция js для проверки, если ваши входные данные пусты или нет.

Вы также должны заметить, что list2 является глобальной переменной, что означает, что вы должны очищать ее в конце каждого valideer() вызова.

В целом, ваш код кажется очень многословным ... попробуйте найти лучший способ выразить свои потребности.

0 голосов
/ 04 мая 2018

Я чувствую, что ваш подход немного сложнее, чем нужно .. См. Мою попытку ниже 

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 для итерации и работы с данным массивом идентификаторов. Это можно сделать еще лучше, запросив входные данные в форме с помощью запроса DOM и обработав его следующим образом.
  2. Вы добавили много встроенных обработчиков событий в вашу дом .. Некоторые из них являются избыточными и не очень нужны. Например, достаточно иметь simgle onsubmit на элементе формы (нет необходимости добавлять его для каждого ввода внутри формы)
  3. Вы использовали глобальную переменную list2. Это то, что вызывало повторяющиеся записи при каждом нажатии кнопки. Локализация области видимости исправит это (переместив ее внутрь функции)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...