Vanilla javascript form validation codepen

          
Contact Form
                

                     
               
                

                     
               
               
              

                  
                  
                  Show/Hide Password
              

              

                   
              
          Send
          
          
          

function validateEmail() {
                let emailTextBox = document.getElementById("email");
                let email = emailTextBox.value;
                let 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,}))$/;


                emailTextBox.style.color = "white";
                if(emailRegex.test(email)) {
                  emailTextBox.style.backgroundColor = "green";
                }
                else {
                  emailTextBox.style.backgroundColor = "red";
                }
              }


              function checkPassword(form) { 

              password1 = form.password1.value; 

              password2 = form.password2.value; 

              // If password not entered 

              if (password1 == '') 

                  alert ("Please enter Password");  

              // If confirm password not entered 

              else if (password2 == '') 

                  alert ("Please enter confirm password"); 

              // If Not same return False.     

              else if (password1 != password2) { 

                  alert ("\nPassword did not match: Please try again...") 

                  return false; 

              } 

              // If same return True. 

              else{ 

                  alert("Password Match: Welcome to my blog") 

                  return true; 

              }     

          }

          function showHide() {
            const userPass = document.getElementById("password");
            if(userPass.type == "password") {
              userPass.type = "text";
            }
            else {
              userPass.type = "password";
            }
          }

            function validatePhone(phone) {
                let phoneNumber = /^\d+$/;
                if(phone.value.match(phoneNumber)) {
                  return true;
                }
                else {
                  alert("Invalid phone number");
                  return false;
                }
            }

            function validateName(name) {
                let userName = /^[A-Za-z]+$/;
                if(name.value.match(userName)) {
                  return true;
                }
                else {
                  alert("Name is invalid");
                  return false;
                }
            }

            function validateUserName(controlId) {
              let control = document.getElementById(controlId);
              control.style.color = "white";

              if(control.value == "") {
                control.style.background = "red";
              }
              else if(Number(control.value)) {
                control.style.background = "red";
              }
              else {
                control.style.background = "green";
              }
            }

            function checkEmail() {

              var email = document.getElementById('email');
              var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

              if (!filter.test(email.value)) {
              alert('Please provide a valid email address');
              email.focus;
              return false;
              }
            }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.