JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" onsubmit="return validate_form(this)" method="post">
What is your gender?<br /> 
<select name="gender" ><span id="gender_help"></span>
                                <option value="0" selected="selected">Select...</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select><br/>

Email: <input type="text" name="email" size="30" ><span id="email_help"></span><br>
Password <input type="password" name="pass" size="30"><span id="pass_help"></span><br>

<input type="submit" value="Submit">
</form>

JavaScript

function validate_gender(field,alerttxt)
{

with (field){
apos=value.indexOf("0");

if (apos>0)
{
document.getElementById('gender_help').innerHTML="";
return true;
}else{

document.getElementById('gender_help').innerHTML=alerttxt; 
return false;

}


}

}
function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {document.getElementById('email_help').innerHTML=alerttxt;return false; }
  else {document.getElementById('email_help').innerHTML="";return true;}
  }
}

function validate_password(field, alerttxt){

with (field){
var re = /^[a-zA-Z0-9]{6,8}$/;

if (re.test(value))
{
document.getElementById('pass_help').innerHTML="";
return true;
}else{

document.getElementById('pass_help').innerHTML=alerttxt; 
return false;

}


}

}


function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform) {
with (thisform)
  {
   if (!validate_gender(gender,"A Valid gender is Required"))
  {gender.focus();return false;}
  if (!validate_email(email,"A Valid Email is Required"))
  {email.focus();return false;}
  if (!validate_password(pass,"Password must be between 6 and 8 characters and contain both numbers and alphas"))
  {pass.focus();return false;}
  }
}