电子邮件验证表单错误

Question

I am trying to create a relatively simple contact form and failing :(

I am following this https://pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html and the first step using JS is to set the outline the box with a red border when an invalid imput is entered.

However using the below code isn't doing anything.

 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> 

Answer 1

The code above has a syntax error, you need to change the name of input.invalid to input.error

/*Email Validation*/


input.invalid {
 border-color: red;
}

to

input.error{
  border-color: red;
}

Answer 2

Try vanilla JS's .checkCustomValidity . Something like the below fired on a .keyup event attached to the entire form works well. NOTE: I just hand coded this so you get the idea... It may need some tweaking.

Then you set your "Submit" button to disabled or enabled based on validity.

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