JSFiddle - React, Tailwind, and code Playground

by ansarmon

HTML

<form action="" onsubmit="return validateForm()">
<div class="field_wrap"><input type="text" name="name" id="name" onblur="validateName(name)" placeholder="Name" class="field_promo"></div>
<div class="field_wrap"><input type="text" name="email" id="email" onblur="validateEmail(value)" placeholder="E-Mail ID" class="field_promo" ></div>
<div class="field_wrap"><input type="text" name="phonenumber" id="phone" onblur="validatePhoneNumber(PhoneNumber)" placeholder="Phone Number" class="field_promo"></div>
<div class="field_wrap"><select name="language" id="language" onblur="validateSelect('language')" class="select_promo">
<option value="0" disabled selected>Prefered Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Tamil</option>
<option value="4">Malayalam</option>
</select></div>
<div class="field_wrap"><select name="time" id="time" onblur="validateSelect('time')" class="select_promo">
<option value="0" disabled selected>Time to Contact</option>
<option value="1">8 - 10 AM</option>
<option value="2">10 - 12 AM</option>
<option value="3">12 - 2 PM</option>
<option value="4">2 - 5 PM</option>
<option value="5">5 - 8 PM</option>
</select></div>

<input type="submit" id="submit" name="submit" value="Submit" class="btn_promo">
</form>

JavaScript

function validateName(x){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(x).value)){
        // Style green
        document.getElementById(x).style.borderColor ='#80c75a';
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.borderColor ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }
    


function validateForm(){
      // Set error catcher
      var error = 0;
	  
	  // Check name
      if(!validateName('name')){
        document.getElementById('nameError').style.display = "block";
        error++;
      }