having trouble with javascript on blur form validation

Question

I'm not the best at JS, but I'm trying to have a form validate client side on the fly. My problem is with validating an email field that requires a valid email and be mandatory. The mandatory part works great but the email validation part doesn't work. Can any one help? Here's a pen of the problem and code below.

 var defaultForm = (function() { var init = function() { // Initial hides $('.error').hide(); }; return { init: init }; }()); (function() { var error = $('.error'), isNotEmpty = false, numberRegEx = /[0-9]|\\./, emailRegEx = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/, $this; defaultForm.init(); // Check for empty mandatory fields $('input').each(function() { $(this).on('blur', function() { $this = $(this); if ($this.val() !== "" && $this.val() !== "---") { isNotEmpty = true; } else if (typeof($this.attr('required')) === typeof undefined) { isNotEmpty = true; } else { isNotEmpty = false; } if (isNotEmpty === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); $this.parent().next('.error').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.parent().next('.error').show(); } }); }); // Check for non-numeric input in number fields $('input[type=number]').on('blur', function() { $this = $(this); if (numberRegEx.test($(this).val()) === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number'); } }); // Check for non-numeric input in number fields $('input[type=emai]').on('blur', function() { $this = $(this); if (emailRegEx.test($(this).val()) === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address'); } }); }()); 

 .panel-grey { background-color: #f8f8f8; border: 1px solid #d6d7d7; padding: 1.25rem; margin-top: 1rem; } .icon { width: 16px; height: 16px; } .has-error .form-control { border-color: #cc0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error span.error { color: #cc0000; } .has-error span.error .icon { fill: #cc0000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div style="display:none"> <svg width="0" height="0" style="position:absolute"> <symbol viewBox="0 0 20 20" id="warning"> <path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path> </symbol> </svg> </div> <form> <div class="panel-app-personal-name panel-grey"> <div class="form-group"> <label for="control_COLUMN4" class="col-sm-4">Name*</label> <div class="col-sm-6 has-feedback"> <input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required=""> <span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span> </div> <div class="clearfix"></div> </div> <div class="form-group"> <label for="control_EMAIL" class="col-sm-4">Email address*</label> <div class="col-sm-6 has-feedback"> <input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required=""> <span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span> </div> <div class="clearfix"></div> </div> </form> 

Answer 1

2 small issues.

missing the l in $('input[type=emai]') .

and

you have the email as type="text" :-

<input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">

 var defaultForm = (function() { var init = function() { // Initial hides $('.error').hide(); }; return { init: init }; }()); (function() { var error = $('.error'), isNotEmpty = false, numberRegEx = /[0-9]|\\./, emailRegEx = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/, $this; defaultForm.init(); // Check for empty mandatory fields $('input').each(function() { $(this).on('blur', function() { $this = $(this); if ($this.val() !== "" && $this.val() !== "---") { isNotEmpty = true; } else if (typeof($this.attr('required')) === typeof undefined) { isNotEmpty = true; } else { isNotEmpty = false; } if (isNotEmpty === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); $this.parent().next('.error').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.parent().next('.error').show(); } }); }); // Check for non-numeric input in number fields $('input[type=number]').on('blur', function() { $this = $(this); if (numberRegEx.test($(this).val()) === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number'); } }); // Check for non-numeric input in number fields $('input[type=email]').on('blur', function() { $this = $(this); if (emailRegEx.test($(this).val()) === true) { $this.closest('.has-feedback').addClass('has-success'); $this.closest('.has-feedback').removeClass('has-error'); $this.next('span').hide(); } else { $this.closest('.has-feedback').addClass('has-error'); $this.closest('.has-feedback').removeClass('has-success'); $this.next('span').show(); $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address'); } }); }()); 

 .panel-grey { background-color: #f8f8f8; border: 1px solid #d6d7d7; padding: 1.25rem; margin-top: 1rem; } .icon { width: 16px; height: 16px; } .has-error .form-control { border-color: #cc0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error span.error { color: #cc0000; } .has-error span.error .icon { fill: #cc0000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div style="display:none"> <svg width="0" height="0" style="position:absolute"> <symbol viewBox="0 0 20 20" id="warning"> <path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path> </symbol> </svg> </div> <form> <div class="panel-app-personal-name panel-grey"> <div class="form-group"> <label for="control_COLUMN4" class="col-sm-4">Name*</label> <div class="col-sm-6 has-feedback"> <input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required=""> <span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span> </div> <div class="clearfix"></div> </div> <div class="form-group"> <label for="control_EMAIL" class="col-sm-4">Email address*</label> <div class="col-sm-6 has-feedback"> <input type="email" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required=""> <span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span> </div> <div class="clearfix"></div> </div> </form>