Проверить правильность заполнения полей и полей, заполненных перед отправкой?

#javascript #jquery #forms #validation

#javascript #jquery #формы #проверка

Вопрос:

Я пересматриваю этот вопрос, поскольку я что-то изменил.

У меня есть форма с несколькими полями, три из которых имеют regex проверку. У меня также есть функция, которая проверяет, заполнены ли все поля до включения submit кнопки, это работает нормально. Однако, если поля заполнены, но invalid поля недействительны, я все равно могу отправить форму. Я хочу знать, могу ли я объединить свои функции, чтобы я мог проверить, заполнены ли поля, и valid перед включением кнопки отправки?

Я пытался добавить дополнительное предложение amp;amp;, но это не сработало, и я попытался реализовать плагин jQuery validate, но он казался очень ограниченным, и я не могу проверить почтовый индекс с его помощью.

Вот сокращенная версия моего проекта:

 // ~~~ postcode validation

function validatePostcode(postcode) {
  var pcode = /^[a-zA-Z]{1,2}[0-9][0-9A-Za-z]{0,1} {0,1}[0-9][A-Za-z]{2}$/;
  return pcode.test(postcode);
}

function validateP() {
  var postcode = $("#postcode").val();

  if (validatePostcode(postcode)) {
    $("#postcode").removeClass("is-invalid");
    return true;
  } else {
    alert('Please enter a valid postcode');
    $("#postcode").addClass("is-invalid");
  }
  return false;
}

// ~~~ validate if form is filled completely, toggles submit amp; edit button

$(document).on('change keyup invalid', '.required', function(e) {
  var disabled = true;

  $(".required").each(function() {
    var value = this.value;

    if ((value) amp;amp; (value.trim() != '')) {
      disabled = false;
      $('.toggle-disabled').prop("disabled", false);
    } else {
      disabled = true;
      $('.toggle-disabled').prop("disabled", true);
      return false;
    }
  });


});

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
  <input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
  <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Развернуть фрагмент

1. Плагин jQuery validate может делать все, что вам нужно, с минимальным пользовательским кодированием. Я бы порекомендовал вам попробовать это, а не пытаться писать весь код самостоятельно.

2. Я пробовал это, и это также не работает для меня, но все же позволяет мне отправить форму

3. Я пытался реализовать его, но это не позволяет мне выполнять всю необходимую проверку, и я просто хотел бы продолжить с тем, что у меня есть на данный момент, поскольку мой проект должен быть завершен в ближайшее время. Но я рассмотрю это подробнее @user1751825

4. jQuery validate поддерживает любой тип проверки, который вам может потребоваться. Он полностью настраивается.

Ответ №1:

Используйте приведенное ниже регулярное выражение:

/^([0-9a-zA-Z-._] )@([0-9a-zA-Z-._] ).([a-zA-Z]){2,7}$/