Twitter Bootstrap Question posted in

Email validation form errors-Twitter bootstrap

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

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search