JSFiddle - React, Tailwind, and code Playground

by Samuel Guimarães

HTML

<form>
  <input type="radio" id="type_person" name="type" value="person" checked/> person
  <input type="radio" id="type_company" name="type" value="company"/> company
  <br /> Name: 
  <input type="text" id="first_name" name="first_name" value="John"/>
  <br /> Last name: 
  <input type="text" id="last_name" name="last_name" value="Doe"/>
  <br /> E-mail: 
  <input type="text" id="email" name="email" value="[email protected]"/>
  <br /> Company name: 
  <input type="text" id="company_name" name="company_name" value=""/>
  <br /> Phone: 
  <input type="text" id="phone" name="phone" value="234-567-890"/>
</form>

JavaScript

function checkFieldLength(value) {
	if (value.length){
  	return true;
  }else {
  	return false;
  }
}

// Check name
console.log(checkFieldLength('John'));
// Check lastname
console.log(checkFieldLength('Doe'));
// Check incorrect company name
console.log(checkFieldLength(''));
// Check correct company name
console.log(checkFieldLength('ACME'));

function checkPhone(phone) {
	var tempPhone = phone.replace(/-|\s/g,"");
	if (tempPhone.length >= 6 && !phone.match(/[a-z]/i)){
  	return true;
  }else {
  	return false;
  }
}

// Check correct phone
console.log(checkPhone('234-567-890'));
// Check incorrect phone
console.log(checkPhone('12-3'));

function validateEmail(email) {
    var domain = email.lastIndexOf(".");
    var at = email.indexOf("@");
    if (at<1 || domain<at+2 || domain+2>=email.length) {
      return false;
    }else {
    	return true;
    }
}

// Check correct email
console.log(validateEmail('[email protected]'));

function doValidate() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}