Недопустимый элемент управления формы с именем = 'не является ошибкой при запуске моего кода HTML и JavaScript

Question

Мой JSP получает файл и тип документа от пользователя и отображает текстовые поля в соответствии с элементом, выбранным из раскрывающегося списка.

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

Когда пользователь нажимает кнопку отправки, файл должен быть загружен - это базовая функциональность

Показывает:

Недопустимый элемент управления формы с именем = '' не может быть сфокусирован

Ошибка при проверке элемента при каждом его запуске.

Также отображаются 2 скрытых значения.

Мой код:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
  <jsp:include page="UserMaster.jsp" />
  <title>Home</title>
  <div class="breadcumb-area flex-style  black-opacity">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2>Home</h2>
          <ul class="d-flex">
            <li><a href="#">Home</a></li>

          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="contact-page-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="contact-form">
            <h3>
              <span>Upload docs </span> of yours!
            </h3>
            <form name="myform" action="UploadDocServlet" method="post" enctype="multipart/form-data">
              <div class="row">

                <div class="col-8">
                  <input class="form-control" type="file" name="doc" id="fileType" onclick="myFunction()">
                </div>
                </p>
                <p>
                  <div class="col-6">
                    <select name="docType" id="opts" class="form-control" required="required" onchange="showdv(this,'Aadhar','Pancard','Voting','Passport','License', 'Ration Card' ,'Domicile' ,'Cast Certificate' ,'Birth Certificate' ,'Leaving Certificate');">
                      <option value="">select</option>
                      <option value="Aadhar">Aadhar</option>
                      <option value="Pancard">Pancard</option>
                      <option value="Voting">Voting</option>
                      <option value="Passport">Passport</option>
                      <option value="License">License</option>
                      <option value="Ration Card">Ration Card</option>
                      <option value="Domicile">Domicile</option>
                      <option value="Cast Certificate">Cast Certificate</option>
                      <option value="Birth Certificate">Birth Certificate</option>
                      <option value="Leaving Certificate">Leaving Certificate</option>
                    </select>
                    <br>
                    <div class="col-13">
                      <div id="box" style="display:none;">
                        <input Type="text" id="boxx" minlength="12" maxlength="12"><br>

                        <button type="submit">Upload</button>
                      </div>
                      <div id="aadharbox" style="display:none;">
                        <input Type="text" pattern="\d*" id="boxx1" minlength="12" maxlength="12" required="required"><br>

                        <button type="button">Upload</button>
                      </div>

                      <div id="panbox" style="display:none;">
                        <input Type="text" id="boxx2" minlength="10" maxlength="10" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="votingbox" style="display:none;">
                        <input Type="text" id="boxx3" minlength="10" maxlength="10" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="passportbox" style="display:none;">
                        <input Type="text" id="boxx4" minlength="8" maxlength="8" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="licensebox" style="display:none;">
                        <input Type="text" id="boxx5" minlength="15" maxlength="15" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="rationbox" style="display:none;">
                        <input Type="text" id="boxx6" minlength="8" maxlength="12" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="domicilebox" style="display:none;">
                        <input Type="text" id="boxx7" minlength="20" maxlength="20" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="castbox" style="display:none;">
                        <input Type="text" id="boxx8" minlength="8" maxlength="12" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="birthbox" style="display:none;">
                        <input Type="text" id="boxx9" minlength="10" maxlength="10" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>

                      <div id="leavingbox" style="display:none;">
                        <input Type="text" id="boxx10" minlength="10" maxlength="10" required="required"><br>

                        <button type="submit">Upload</button>
                      </div>
                    </div>
                  </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- footer-area start -->
  <footer class="footer-area">

    <div class="footer-bottom">
      <div class="container">
        <div class="row">
          <div class="col-12 copyright">
            <p>
              <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
              Copyright &copy;
              <script>
                document.write(new Date().getFullYear());
              </script>
              All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href=# target="_blank" class="text-primary">MSPS</a>
              <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
            </p>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- footer-area end -->

  <script type="text/javascript">
    function showdv(obj, id1, id2, id3, id4, id5, id6, id7, id8, id9, id10) {
      txt = obj.options[obj.selectedIndex].text;
      document.getElementById("box").style.display = 'none';
      document.getElementById("aadharbox").style.display = 'none';
      document.getElementById("panbox").style.display = 'none';
      document.getElementById("votingbox").style.display = 'none';
      document.getElementById("passportbox").style.display = 'none';
      document.getElementById("licensebox").style.display = 'none';
      document.getElementById("rationbox").style.display = 'none';
      document.getElementById("domicilebox").style.display = 'none';
      document.getElementById("castbox").style.display = 'none';
      document.getElementById("birthbox").style.display = 'none';
      document.getElementById("leavingbox").style.display = 'none';
      if (txt.match(id1)) {
        document.getElementById("aadharbox").style.display = 'block';
        document.getElementById("boxx1").placeholder = "Enter Aadhar Number"
      }
      if (txt.match(id2)) {
        document.getElementById("panbox").style.display = 'block';
        document.getElementById("boxx2").placeholder = "Enter Pan Number"
      }
      if (txt.match(id3)) {
        document.getElementById("votingbox").style.display = 'block';
        document.getElementById("boxx3").placeholder = "Enter Voting ID"
      }
      if (txt.match(id4)) {
        document.getElementById("passportbox").style.display = 'block';
        document.getElementById("boxx4").placeholder = "Enter Passport Number"
      }
      if (txt.match(id5)) {
        document.getElementById("licensebox").style.display = 'block';
        document.getElementById("boxx5").placeholder = "Enter License Number"
      }
      if (txt.match(id6)) {
        document.getElementById("rationbox").style.display = 'block';
        document.getElementById("boxx6").placeholder = "Enter Ration Card Number"
      }
      if (txt.match(id7)) {
        document.getElementById("domicilebox").style.display = 'block';
        document.getElementById("boxx7").placeholder = "Enter Domicile Number"
      }
      if (txt.match(id8)) {
        document.getElementById("castbox").style.display = 'block';
        document.getElementById("boxx8").placeholder = "Enter Case Certificate Number"
      }
      if (txt.match(id9)) {
        document.getElementById("birthbox").style.display = 'block';
        document.getElementById("boxx9").placeholder = "Enter Birth Certificate Number"
      }
      if (txt.match(id10)) {
        document.getElementById("leavingbox").style.display = 'block';
        document.getElementById("boxx10").placeholder = "Enter Leaving Certificate Number"
      }
    }

    function myFunction() {
      document.getElementById("fileType").onchange = function() {
        var reader = new FileReader();

        var fileName = this.value;
        var fileExtension = fileName.substr(fileName.length - 5);
        var fileExtensionNew = fileName.substr(fileName.length - 4);

        if (fileExtensionNew != ".png" && fileExtensionNew != ".jpg" && fileExtension != ".jpeg") {
          alert("Invalid File Type. Please select Image only");
          $("#fileType").attr("src", "blank");

          $('#fileType').wrap('<form>').closest('form').get(0).reset();
          $('#fileType').unwrap();
          return false;
        }

        reader.onload = function(e) {
          // get loaded data and render thumbnail.
          document.getElementById("fileType").src = e.target.result;
          $("#fileType").show();
        };

        // read the image file as a data URL.
        reader.readAsDataURL(this.files[0]);
      };
    }
  </script>

  <!-- jquery latest version -->
  <script src="assets/js/vendor/jquery-2.2.4.min.js "></script>
  <!-- popper.min.js -->
  <script src="assets/js/vendor/popper.min.js "></script>
  <!-- bootstrap js -->
  <script src="assets/js/bootstrap.min.js "></script>
  <!-- owl.carousel.2.0.0-beta.2.4 css -->
  <script src="assets/js/owl.carousel.min.js "></script>
  <!-- swiper.min.js -->
  <script src="assets/js/swiper.min.js "></script>
  <!-- mailchimp.js -->
  <script src="assets/js/mailchimp.js"></script>
  <!-- metisMenu.min.js -->
  <script src="assets/js/metisMenu.min.js"></script>
  <!-- plugins js -->
  <script src="assets/js/plugins.js "></script>
  <!-- google map -->

  <!-- main js -->
  <script src="assets/js/scripts.js "></script>
  </body>

  </html>

Answer 1

У вас есть несколько примеров, таких как:

<div id="panbox" style="display:none;">
    <input Type="text" id="boxx2" minlength="10" maxlength="10" required="required"><br>
   <button type="submit">Upload</button>
</div>

Ввод required, поэтому форма не может быть отправлена ​​, если она не заполнена.

Однако он находится внутри элемента с style="display:none;", поэтому браузер не показывает его, поэтому пользователь не может заполнить его.

Мой JSP получает файл и тип документа от пользователя и отображает текстовые поля в соответствии с элементом, выбранным из раскрывающегося списка.

Если вы принимаете решение о том, какие поля отображаются на основе выбора, то, вероятно, вам следует принимать решение о том, какие из них обязательны одновременно.