JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<div>
<form name="myform" onsubmit="return validateForm();" action="#" method="POST">
<ul>
<li>
<label>*First Name:</label>
<input type="text" name="Fname" value="">
</li>
<li>
<label>Last Name:</label>
<input type="text" name="Lname" value="">
</li>
<li>
<label>*Email:</label>
<input type="text" name="Email" value="">
</li>
<li>
<label  class="honeypot">Mobile Number:</label>
<input type="text" name="Mobile" value="" class="honeypot">
</li>
<li>
<label>Phone Number:</label>
<input type="text" name="Phone" value="">
</li>
<li>
<label>*Company / Organization:</label>
<input type="text" name="Company" value="">
</li>
<li>
<label>Industry:</label>
<input type="text" name="Industry" value="">
</li>
<li>
<label>Job Title:</label>
<input type="text" name="Job" value="">
</li>
<li>
<label>*Country:</label>
<select size="1" class="country" title="" name="Country">
<option value="">Select your country</option>
<option value="USA">USA</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option...

CSS

.honeypot {display: none;}
ul {list-style-type:none;}
label {width:100px; display: inline-block;margin: 10px;text-align:right;}

JavaScript

function stripHTML(){
var com = document.forms["myform"]["Comment"].value;
var re = /(<([^>]+)>)/gi;
// alert(com.replace(re , ""));
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, "")
}

function validateForm() {
var fn = document.forms["myform"]["Fname"].value;
var em = document.forms["myform"]["Email"].value;
var cm = document.forms["myform"]["Company"].value;
var co = document.forms["myform"]["Country"].value;
var en = document.forms["myform"]["Enquiry"].value;
var ct = document.forms["myform"]["Contact"].value;

var atp = em.indexOf("@");
var dotp = em.lastIndexOf(".");


//for name
if ( fn == null || fn == "" ) {
alert ("First name should be filled");
document.myform.Fname.focus();
return false;
}
// for email
if (atp<1 || dotp<atp+2 || dotp+2>=em.length) {
alert ("Not a valid email address");
document.myform.Email.focus();
return false;
}
//for company
if (cm == null || cm == "") {
alert ("Company should be filled");
document.myform.Company.focus();
return false;
}
//for country
if (co == null || co == "") {
alert ("Country should be filled");
document.myform.Country.focus();
return false;
}
//for enquiry
if (en == null || en == "") {
alert ("Enquiry should be filled");
document.myform.Enquiry.focus();
return false;
}
//for contact
if (ct == null || ct == "") {
alert ("Please select the way to contact you");
document.myform.Contact.focus();
return false;
}

}