Проверка нескольких полей на Javascript

ProgramBox

Проверка нескольких полей на Javascript

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я хочу проверить несколько полей в своей форме. Для этого я не хочу писать отдельное условие для всех полей. Итак, я назначил сообщения об ошибках как пару ключей и значений. Если я оставлю все поля без ввода какого-либо значения, тогда должно появиться сообщение об ошибке.

Это мой HTML-код.

 <head>
<title></title>
<script src="Scripts/validate_register.js"></script>
</head>
<body>
<table class="valid">
        <tr>
            <td>id:</td>
            <td><input type="text" id="id1" placeHolder="Enter your name"/></td></tr>
            <tr><td>email:</td>
            <td><input type="text" id="id2" placeHolder="Enter your email"/></td></tr>
            <tr><td>password:</td>
            <td><input type="text" id="id3" placeHolder="Enter your password"/></td></tr>
            <tr><td>address:</td>
            <td><input type="text" id="id4" placeHolder="Enter your address"/></td></tr>
            <tr><td>contact no:</td>
            <td><input type="text" id="id5" placeHolder="Enter your contact no"/></td>
        </tr>
                    <tr><td><input type="submit" onclick="validate()" value="submit"> </td></tr></table>  
  </body>

Это мой код javascript.

 function validate () {
        var error={
                    id1:'name Cannot be empty',
                    id2:'email cannot be empty',
                    id3:'password cannot be empty',
                    id4:'address Cannot be empty',
                    id5:'contactno cannot be empty'

        }
        var elements=document.querySelectorAll('input');
        for(var i=0;i<elements.length;i  ){

        if(elements[i]['value']=="")
        {
                    var id=elements[i]['id'];
                    document.querySelector("." id).innerHTML=error[id];
        }
        }

 }

Это показывает ошибку в document.querySelector("." id).innerHTML=error[id]; строке о том, что что-то есть null .

Ответ №1:

документ.querySelector(«.» id).innerHTML=ошибка[id];

Это ожидает, что у вас будет элемент с классом, соответствующим input ‘s id (например, class="id2" и тому подобное). Вы не показали ни одного из них в своем вопросе. querySelector возвращает null , если не удается найти соответствующий элемент.

Если вы добавите серию подобных вещей в соответствующие места:

 <span class="id1"></span>

…затем этот элемент получит сообщение об ошибке для вашего <input id="id1"> . Или, конечно, поскольку эти элементы уникальны, вы могли бы использовать id s как error_id1 , error_id2 , и тому подобное.

Вот полный пример использования классов: живая копия

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <table class="valid">
      <tr>
        <td>id:</td>
        <td><input type="text" id="id1" placeHolder="Enter your name"/><span class="id1"></span></td></tr>
      <tr><td>email:</td>
        <td><input type="text" id="id2" placeHolder="Enter your email"/><span class="id2"></span></td></tr>
      <tr><td>password:</td>
        <td><input type="text" id="id3" placeHolder="Enter your password"/><span class="id3"></span></td></tr>
      <tr><td>address:</td>
        <td><input type="text" id="id4" placeHolder="Enter your address"/><span class="id4"></span></td></tr>
      <tr><td>contact no:</td>
        <td><input type="text" id="id5" placeHolder="Enter your contact no"/><span class="id5"></span></td>
      </tr>
      <tr><td><input type="button" onclick="validate()" value="submit"> </td></tr></table>  
  </body>
  <script>
    "use strict";

    function validate () {
      var error={
        id1:'name Cannot be empty',
        id2:'email cannot be empty',
        id3:'password cannot be empty',
        id4:'address Cannot be empty',
        id5:'contactno cannot be empty'

      }
      var elements=document.querySelectorAll('input');
      for(var i=0;i<elements.length;i  ){

        var id=elements[i]['id'];
        document.querySelector("." id).innerHTML=elements[i].value ? "" : error[id];
      }

    }
  </script>
</body>
</html>

В приведенном выше примере я также удалил ошибки, когда поле имело значение, так что при втором запуске ошибка исчезает. (Я также изменил кнопку отправки на просто кнопку, но это только для того, чтобы форма нигде не отправлялась в примере.)

Примечание: я бы перешел validate к onsubmit форме и вернул false ее, если есть какие-либо ошибки.

1. Спасибо. Он работает нормально. Есть ли какой-либо другой способ минимизировать мой код? Вместо того, чтобы предоставлять 5 классов span для 5 полей, как я могу предоставить общий класс, и мне также нужно получить к нему доступ в моем скрипте.

2. @user3764346: У вас есть много вариантов. Например, вместо того, чтобы иметь spans в разметке, вы можете добавить их (используя либо insertAdjacentHTML или createElement в сочетании с insertBefore ), если есть ошибка, и удалить их (если они присутствуют), если их нет. Мое предложение действительно имеет смысл только в том случае, если ошибка для каждого поля может меняться (например, если вы проверяете email , что в поле есть a @ , а также проверяете, что оно не пустое); если это невозможно, вы можете поместить интервалы, содержащие ошибки в разметке, изначально скрытыми, а затем показать /спрячьте их в validate`. Множество вариантов.

Ответ №2:

. предназначен для классов. Если вы хотите определить идентификаторы, вам нужно использовать # . Более того, вам нужно использовать value , а не innerHTML . Итак, правильно

 document.querySelector("." id).innerHTML=error[id];

Для

 document.querySelector("#" id).value=error[id];