JSFiddle - React, Tailwind, and code Playground
HTML
<form method="POST" action="http://webdevfoundations.net/scripts/formdemo.asp" id="signUp" onSubmit="return confirmForm(this);">
<fieldset id="personalInfo">
<legend>
Personal Information
</legend>
<table class="userInput">
<tr>
<td class="label">
<label for="firstName">
First Name
</label>
</td>
<td>
<input type="text" name="first" id="firstName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50" autofocus/>
</td>
</tr>
<tr>
<td class="label">
<label for="lastName">
Last Name
</label>
</td>
<td>
<input type="text" name="last" id="lastName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50"/>
</td>
</tr>
<tr>
<td class="label">
<label for="email">
Email<span class="asterisk">*</span>
</label>
</td>
<td>
<input type="email" name="email" id="email" pattern="\w.*+\@+[a-z]+\.[a-z]{2,7}" title="Example: [email protected]" required/>
</td>
</tr>
<tr>
<td class="label">
...
JavaScript
function confirmForm(form){
var patt1 = /^[a-zA-Z]{2,}$/;
if(!patt1.test(form.first.value)) {
//if(!(form.first.value.match(/^[a-zA-Z]{2,}$/))) {
alert("Invalid First Name");
form.first.focus();
return false;
}
var patt2 = /^[a-zA-Z]{2,}$/;
if(!patt2.test(form.last.value)) {
// if(!(form.last.value.match(/^[a-zA-Z]{2,}$/))) {
alert("Invalid Last Name");
form.last.focus();
return false;
}
var patt3 = /^\w.+\@+[a-z]+\.[a-z]{2,7}$/;
if(!patt3.test(form.email.value)) {
alert("Invalid Email");
form.email.focus();
return false;
}
var patt4 = /^[1-9]{1,3}$/;
if(!patt4.test(form.age.value)) {
//if(!(form.age.value.match(/^[1-9]{1,3}$/))){
alert("Invalid Age");
form.age.focus
return false
}
var patt5 = /^\w{5,}$/;
if(!patt5.test(form.user.value)) {
//if(!(form.user.value.match(/^\w{5,}$/))) {
alert("Invalid Username + suman bogati");
form.user.focus();
return false;
}
var patt6 = /^\w{5,}$/;
if(!patt6.test(form.pword.value)) {
// if(!(form.pword.value.match(/^.\w{5,}$/))){
alert("Invalid Password");
form.pword.focus();
return false;
}
if(!(form.pwordConfirm.value == form.pword.value)){
alert("Password must be the same");
form.pwordConfirm.focus();
return false;
}else {
return true;
}
}