JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

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; 
      }
    }
	// Validate email
    function validateEmail(email){ 
      var re = /^(([^<>()[\]\\.,;:\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,}))$/;
      if(re.test(email)){
        document.getElementById('email').style.borderColor ='#80c75a';
 //       document.getElementById('emailError').style.display = "none";
        return true;
      }else{
        document.getElementById('email').style.borderColor ='#e35152';
        return false;
      }
    }
	// Phone Number
	function validatePhone(phone) {
    //var re=/^(\+91-|\+91|0)?\d{10}$/;//for pattern like +91-9198387083,9198387083,09198387083
    var re = /^\d{10}$/; //for exact 10 digits
    var re1 = /^(\d{4}\s)?\d{7}$/; // for phone if you don't need space remove \s
    if (re.test(phone)) {
        document.getElementById('phone').style.borderColor = '#80c75a';
//        document.getElementById('phoneError').style.display = "none";
        return true;
    } else if (re1.test(phone)) {

        document.getElementById('phone').style.borderColor = '#80c75a';
    } else {

        document.getElementById('phone').style.borderColor = '#e35152';
        return false;
    }
}

jQuery("#phone").on("blur", function () {
    validatePhone($(this).val());
});
	// Select Language
function validateSelect(id){ 
  var el =...