Как вызвать сообщение об ошибке проверки формы Bootstrap 4 по умолчанию из настраиваемого внешнего скрипта - PullRequest
Новая
       13

Как вызвать сообщение об ошибке проверки формы Bootstrap 4 по умолчанию из настраиваемого внешнего скрипта

0 голосов
/ 16 апреля 2019

В нашей контактной форме я пытаюсь разрешить отправку сообщений только с адресов электронной почты из Соединенных Штатов, поскольку мы можем вести бизнес только в этой одной стране.Как вызвать сообщение об ошибке по умолчанию при попытке отправки формы, чтобы «неверное» сообщение отображалось так же, как и для полей имени и фамилии?

В приведенном ниже коде для примера я разрешаю только 'com', 'edu', 'gov', 'net', 'org'.Цель состоит в том, чтобы вызвать сообщение всякий раз, когда в поле электронной почты вводится адрес электронной почты, отличный от указанного выше.

$(document).ready(function() {
  $(function() {
    $("#testform").submit(function() {
      str = $('input[name=emailAddress]').val();
      str = str.split('@').slice(0);
      str = str[1].split('.').slice(0);

      var allowedDomains = ['com', 'edu', 'gov', 'net', 'org'];

      alert("str = " + str[1]);

      if ($.inArray(str[1], allowedDomains) !== -1) {
        alert(str + ' is allowed');

      } else {
        alert('not allowed');
        event.preventDefault();
        event.stopPropagation();
        $('#emailAddress').addClass('invalid');
      }
    });
  });
});
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/holder.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>

<div class="container">
  <form action="" method="post" target="" class="needs-validation" role="form" id="testform">
    <fieldset>
      <div class="form-group">
        <label for="firstName" class="col-form-label">Customer first name:
    <input type="text" class="form-control" name="firstName" id="firstName" required aria-required="true">
    </label>
      </div>
      <div class="form-group">
        <label for="lastName" class="col-form-label">Customer last name:
    <input type="text" class="form-control" name="lastName" id="lastName" required aria-required="true">
    </label>
      </div>
      <div class="form-group">
        <label for="emailAddress" class="col-form-label">Customer email address:
    <input type="email" class="form-control" name="emailAddress" id="emailAddress" required placeholder="Enter valid email" aria-required="true">
    </label>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </fieldset>
  </form>
</div>
...