Bootstrap 4 Проверка формы проверки электронной почты с использованием проверки по умолчанию

1

Я пытаюсь получить электронное письмо для проверки моей формы, как equalTo, используя новый Bootstrap 4. Если возможно, я просто хочу использовать Bootstrap 4 и не хочу включать какую-либо другую библиотеку. Я предполагаю, что просто нужно что-то в javascript внизу, который проверяет соответствие полей. Любая помощь приветствуется. Я удивлен, что никто другой не просил об этом, или действительно пример не на веб-сайте Bootstrap. Я полагаю, что это общее требование.

<!DOCTYPE html>
<html>

<head>
  <title>JQuery-validation demo | Bootstrap</title>
  <?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>
</head>

<body>
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-4 mb-3">
        <label for="validationCustom01">Email</label>
        <input type="Email" class="form-control" id="email" placeholder="Email" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <label for="validationCustom02">Confirm Email</label>
        <input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" required>
        <div class="valid-feedback">
          Emails should match
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
      Agree to terms and conditions
    </label>
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // check match

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>
</body>

</html>
  • 0
    Вы проверили часть проверки в документах Bootstrap под формами? Вот ссылка: getbootstrap.com/docs/4.0/components/forms/#validation
  • 0
    Моя проблема - проверка электронной почты = проверка электронной почты. Если нет, то отобразить ошибку. Я пытаюсь убедиться, что у людей нет опечаток в этих электронных письмах. Проверка формата электронной почты Bootstrap в порядке.
Показать ещё 5 комментариев
Теги:
bootstrap-4

2 ответа

0
Лучший ответ

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

// Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // check match

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            var email = $("#email").val();
            var confirmemail = $("#confirm_email").val();
            if(email !== confirmemail){ 
            form.classList.add('was-validated');
              $("#validate").html("Email Should Match");
              $("#validate").addClass("error");
               $("#confirm_email").addClass("error-text");
              event.preventDefault();
              event.stopPropagation();              
            }
            else{
            $("#validate").removeClass("error");
            form.classList.add('was-validated');
               $("#confirm_email").removeClass("error-text");
              $("#validate").html("Looks Good!");
            }
           
          }, false);
        });
      }, false);
    })();
.error{
color:red !important;
}
.error-text{
border:1px solid red !important;
}
<!DOCTYPE html>
<html>

<head>
  <title>JQuery-validation demo | Bootstrap</title>
  <!--<?php
echo '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">';
?>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-4 mb-3">
        <label for="validationCustom01">Email</label>
        <input type="Email" class="form-control" id="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <label for="validationCustom02">Confirm Email</label>
        <input type="email" class="form-control" id="confirm_email" placeholder="Confirm Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
       
        <div id="validate" class="valid-feedback">
          Emails should match
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
      Agree to terms and conditions
    </label>
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>
</body>

</html>
Поделиться
  • 0
    Я пытаюсь проверить, есть ли адрес электронной почты для подтверждения. Если не отображается и ошибка.
  • 0
    @Chris в свой ввод попробуйте добавить pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[az]{2,4}$" это будет работать в противном случае вам нужно добавить регулярное выражение в ваш jquery, это поможет. Я обновил ответ, проверьте это сейчас.
Показать ещё 5 комментариев
0 

<form>
  
    <label for="t2">What your e-mail?</label>
    <input type="email" id="t2" name="email" required>
 
    <button>Submit</button>
  
</form>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню