Vanilla javascript form validation codepen

HTML
CSS
JS

Result
Skip Results Iframe


          Contact Form
                
                     
               
                
                     
               
               
              
                  
                  
                  Show/Hide Password
              

              
                   
              
          Send

body {
		font-family: "Open Sans", "sans-serif";
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizelegibility;
	}

	.input-group {
		width: 15em;
		height: 2.5em;
		margin-bottom: 1.8em;
		margin-right: 1.7em;
		padding-left: 2.5em;
		border: 0.1em solid #ccc;
		border-radius: 0.3em;
		background-color: #ffffea;
	}

	.input-group:hover {
		border-color: #3399FF;
		box-shadow: 0em 0em 0.2em #3399FF;
	}

	.input-group:active {
		border-color: #006699;
	}

	.wrapper {
		position: relative;
		display: inline;
	}

	.form {
		margin: 10em 35em;
	}

	.form h2 {
		font-size: 2em;
		font-weight: bold;
		color: 	#666666;
	}

  span {
    color: #ccc;
    font-size: 10px;
    
  }

	.send-btn {
		padding: 0.5em 4em;
		font-size: 1em;
		margin-top: 2em;
		background-color: #319cd5;
		color: white;
		border: none;
		border-radius: 0.3em;
		margin-left: 2em;
	}

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