Подскажите, как разрешить отправку формы без обновления страницы

Рейтинг: 0Ответов: 1Опубликовано: 12.03.2023

Пишу валидацию данных формы. При неправильном вводе данных, появляется запрет на отправку формы, но при исправлении данных и повторной отправке - запрет действителен.

<script>

const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
    const NUMBER_REGEXP = /^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/;

    function isEmailValid(value) {
      return EMAIL_REGEXP.test(value);
    }

    function isTelValid(value) {
      return NUMBER_REGEXP.test(value);
    }


    $(document).ready(function(){
      $("#email").change(function () {

        let input = document.getElementById('email');
        let form = document.querySelector('form');

        if (isEmailValid(input.value)) {
          input.style.borderColor = 'green';
        } else {
          input.style.borderColor = 'red';
          form.addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }

      });

      $("#tel").change(function () {

        let input1 = document.getElementById('tel');
        let form = document.querySelector('form');

        if (isTelValid(input1.value)) {
          input1.style.borderColor = 'green';
        } else {
          input1.style.borderColor = 'red';
          form.addEventListener('submit', function(event) {
            event.preventDefault();
          });

        }

      });


    });

</script>

</head>

<body>

<form th:action="'/new-order'" class="form" method="post">
<input type="text" name="email" id="email" placeholder="ivanov@mail.ru" required />
<input type="number" name="tel" id="tel" placeholder="+7" required />
<button type="submit" id="form_submit">Подтверждение заказа</button>
</form>

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

javascript html jquery веб-программирование
Источник: Stack Overflow на русском

Ответы

▲ 1Принят
const form = document.querySelector('form')

form.addEventListener('submit', e => {
    e.preventDefault()
    // ... тут логика отправки
})