JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<form name="a"> 
	  <fieldset> 
	  <legend><b>Fill in your billing address.</b></legend> 
	  <dl> 
	    <dt><label id="lname" for="n1">First name</label> and <label id="lsurname" for="n2">Last name</label></dt> 
	      <dd><input type="text" name="name" id="n1"> 
	      <input type="text" name="surname" id="n2"></dd> 
	    <dt><label id="laddress" for="address">Address</label></dt> 
	    <dd><input type="text" name="address" size="40" 
	      onfocus="highLabel('a1', '#ccf')" onblur="highLabel('a1', '')"></dd> 
	    <dt><label id="lcity">City</label>, <label id="lstate">State (two-letter abbreviation)</label>, and <label id="lzip">Zip</label></dt> 
	      <dd><input type="text" name="city">, 
	      <input type="text" name="state" size="4" maxlength="2"> 
	      <input type="text" name="zip" size="12" maxlength="10"></dd> 
	    <dt><label id="lphone">Phone (area code and number)</label> and <label id="lemail">Email</label></dt> 
	      <dd><input type="text" name="phone" size="18"> 
	      <input type="text" name="email" size="35"></dd> 
	  </dl> 
	  <p><input type="button" onclick=" validate(this.form, billing_address_check) 
	  &amp;&amp; alert('All required fields are OK!')" value="Validate the Billing Address"></p> 
	  </fieldset> 
	</form>

JavaScript

function highLabel(e, value) { 
	  e = document.getElementById('l'+e.name); 
	  if (e) 
	    e.style.background = value; 
	  } 
	  function initForm(f) { 
	    var e, i; 
	    for (i=0; i<f.elements.length; i++) { 
	      e = f.elements[i]; 
	      /* ignore fields with multiple elements */ 
	      if (e.type == 'text' && !e.length) { 
	        e.onfocus = function() { 
	          highLabel(this, '#ccf'); 
	        }; 
	        e.onblur = function() { 
	          highLabel(this, ''); 
	        }; 
	      } 
	    } 
	  } 
	  onload = function() { initForm(document.a); } 
	  errc[31] = 'Please enter your two-letter state abbreviation.'; 
	  billing_address_check = { 
	  name:{ verify: text, filter: true, message: 'Please enter your first name.' }, 
	  surname: { filter: 1, 
	  verify: text, message: 'Please enter your last name.', filter:1 }, 
	  address: { filter: 1, 
	  verify: words, message: 'Please enter your address.' }, 
	  city: { filter: 1, verify: text, message: 'Please enter your city.' }, 
	  state: { filter: 1, verify: function(s) { 
	    var a = nwts(s).toUpperCase().match(/^[a-z]{2}$/ig); 
	    err = a != null && a.length ? 0 : 31; 
	    return a; 
	  } }, 
	  zip: { verify: zip, filter: 1, force: 1 }, 
	  phone: { verify: tel, filter: 1, force:1 }, 
          email: { verify: email, filter: 1, force:1 }
      };