проверка формы начальной загрузки 4 по мере того, как пользователь вводит - PullRequest
Новая
       15

проверка формы начальной загрузки 4 по мере того, как пользователь вводит

0 голосов
/ 04 ноября 2019

Я воссоздал свою проблему в простом index.php с 2 входами и 1 кнопкой, которая перенаправляет на страницу page2.php.
У меня есть проверка формы BS-4, а входные теги имеют шаблон регулярных выражений.

Проблема 1: Проверка выполняется ТОЛЬКО после нажатия кнопки. Не так, как я печатаю.
Проблема 2: При обновлении и ничего не вводя, кнопка перенаправляет меня на страницу page2.php.

Я думаю, виновник: addEventListener('load'), но я не уверен, так как я новичок в PHP, JS, Bootstrap и в жизни в целом ...

БудетБуду очень признателен за любую идею!

Вот код: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
  input[type="submit"]:disabled {
    background-color: red;
  }
</style>
</head>

<body>
  <div class="container mt-2">
    <div class="row">
      <div class="col-md-4 offset-md-4">
        <form action="page1.php" id="myForm1" class="was-validation" novalidate>
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">a to z only (3 to 6 long)</div>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">a to z only (3 to 6 long)</div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    (function() {
      window.addEventListener('load', function() {
        let currForm1 = document.getElementById('myForm1');
        currForm1.addEventListener('submit', function(event) {
          if (currForm1.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          currForm1.classList.add('was-validated');
        }, false);
      });
    })();
  </script>

1 Ответ

1 голос
/ 04 ноября 2019

Если вы не хотите, чтобы форма отправлялась, когда какой-либо из входов пуст, вам нужно добавить к ним атрибут required, вот пример: 

window.addEventListener('load', function() {
  let currForm1 = document.getElementById('myForm1');
  currForm1.addEventListener('submit', function(event) {
    if (currForm1.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    currForm1.classList.add('was-validated');
  }, false);
  // Validate on input:
  currForm1.querySelectorAll('input').forEach((input) => {
    input.addEventListener('input', () => {
      if (input.checkValidity()) {
        input.classList.remove('is-invalid')
        input.classList.add('is-valid');
      } else {
        input.classList.remove('is-valid')
        input.classList.add('is-invalid');
      }
    });
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
  input[type="submit"]:disabled {
    background-color: red;
  }
</style>
</head>

<body>
  <div class="container mt-2">
    <div class="row">
      <div class="col-md-4 offset-md-4">
        <form action="page1.php" id="myForm1" class="was-validation" novalidate="z">
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus required>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">a to z only (3 to 6 long)</div>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" pattern="^[a-z]{3,6}$" autofocus required>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">a to z only (3 to 6 long)</div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
...