Ошибки формы проверки электронной почты

Question

Я пытаюсь создать относительно простую контактную форму и не могу :(

Я следую этому https: // pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html и первый шаг с использованием JS - установить контур прямоугольника с красной рамкой при вводе недопустимого импута.

Однако использование приведенного ниже кода ничего не делает.

const inputs = document.querySelectorAll("input, select, textarea");

inputs.forEach(input => {
  input.addEventListener(
    "invalid",
    event => {
      input.classList.add("error");
    },
    false
  );
});

/*Email Validation*/


input.invalid {
  border-color: red;
}

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

  <h1 class="text-center font-bold mt-5 pt-2 mb-3">
          <em>Contact us</em>
      </h1>

      <!-- contact-->
         <section id="contact" style="background-color: #fff;" class="text-page">
           <div class="container">
             <div class="row">
               <div class="col-md-12">
                 <h2 class="heading">Contact</h2>
                 <div class="row">
                   <div class="col-md-6">
                     <form id="contact-form" method="post" action="#" class="contact-form">
                       <div class="controls">
                         <div class="row">
                           <div class="col-sm-6">
                             <div class="form-group">
                               <label for="name">Your firstname *</label>
                               <input type="text" name="name" placeholder="Enter your firstname" required="required" class="form-control">
                             </div>
                           </div>
                           <div class="col-sm-6">
                             <div class="form-group">
                               <label for="surname">Your lastname *</label>
                               <input type="text" name="surname" placeholder="Enter your  lastname" required="required" class="form-control">
                             </div>
                           </div>
                         </div>
                         <div class="form-group">
                           <label for="surname">Your email *</label>
                           <input type="email" name="email" placeholder="Enter your  email" required="required" class="form-control">
                         </div>
                         <div class="form-group">
                           <label for="surname">Your message for us *</label>
                           <textarea rows="4" name="message" placeholder="Enter your message" required="required" class="form-control"></textarea>
                         </div>
                         <div class="text-center">
                           <input type="submit" name="name" value="Send message" class="btn btn-primary btn-block">
                         </div>
                       </div>
                     </form>
                   </div>
                   <div class="col-md-6">
                     
                     <p class="social"><a href="#" title="" class="facebook"><i class="fa fa-facebook"></i></a><a href="#" title="" class="twitter"><i class="fa fa-twitter"></i></a><a href="#" title="" class="gplus"><i class="fa fa-google-plus"></i></a><a href="#" title="" class="instagram"><i class="fa fa-instagram"></i></a><a href="#" title="" class="email"><i class="fa fa-envelope"></i></a></p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </section>

javascript css html bootstrap-4

0

Hutch 13 Мар 2018 в 01:17

Answer 1

В приведенном выше коде есть синтаксическая ошибка, вам нужно изменить имя input.invalid на input.error

/*Email Validation*/


input.invalid {
 border-color: red;
}

К

input.error{
  border-color: red;
}

1

Hutch 25 Янв 2019 в 18:05

Answer 2

Попробуйте ванильный JS .checkCustomValidity. Что-то вроде приведенного ниже, запущенного для события .keyup, прикрепленного ко всей форме, работает хорошо. ПРИМЕЧАНИЕ: Я просто вручную закодировал это, чтобы вы поняли ... Может потребоваться некоторая настройка.

Затем вы устанавливаете кнопку «Отправить» на отключенную или активную в зависимости от срока действия.

function formIsValid(formId){
var result = true;
var formInputs = document.getElementById(formId).querySelectorAll("input");
    for (var i = 0; i < formInputs.length; i++) {
        //if the input is not hidden or disabled
        if(formInputs[i].offsetHeight > 0 && !formInputs[i].attribute("disabled","disabled")){
            if(!dialogInputs[i].checkValidity()){
                result = false;
            }
        }
    }
    return result;
}

1

Ronnie Royston 12 Мар 2018 в 22:25

Ошибки формы проверки электронной почты

2 ответа

Похожие вопросы

Новые вопросы

javascript