Question

我正在尝试创建一个相对简单的联系表单并失败:(

我关注此https://pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html 使用JS的第一步是在输入无效输入时将框架的轮廓设置为红色边框。

但是使用下面的代码并没有做任何事情。

＆＃13;

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

＆＃13;

/*Email Validation*/


input.invalid {
  border-color: red;
}

＆＃13;

          <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>

＆＃13;

Answer 1

上面的代码有语法错误，您需要将input.invalid的名称更改为input.error

/*Email Validation*/


input.invalid {
 border-color: red;
}

到

input.error{
  border-color: red;
}

Answer 2

尝试vanilla JS＆＃39; .checkCustomValidity。对于整个表单附加的.keyup事件触发的下面的内容效果很好。注意：我只是手动编码，所以你得到了想法......可能需要一些调整。

然后你设置你的＆＃34;提交＆＃34;按钮被禁用或根据有效性启用。

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;
}

电子邮件验证表单错误

2 个答案: