JSFiddle - React, Tailwind, and code Playground

HTML

<form action="index.php" method="post" name="regJobSeekerNew" enctype="multipart/form-data">
  <div class="col width-60">
    <fieldset class="tpj_fieldset">
      <legend>User Information</legend>

      <table class="admintable">
        <tr>
          <td class="key"><label for="first_name"> First Name: </label></td>
          <td><input type="text" size="50" maxlength="100" name="first_name" id="first_name" class="inputbox"></td>
        </tr>
        <tr>
          <td class="key"><label for="last_name"> Last Name: </label></td>

          <td><input type="text" size="50" maxlength="100" name="last_name" id="last_name" class="inputbox"></td>
        </tr>
        <tr>
          <td class="key"><label for="name"> Username: </label></td>
          <td><input type="text" size="50" maxlength="100" name="username" id="username" class="inputbox">
            <input type="button" onclick="username_validate();" value="Check Availability"/>
            <br />
            <div id="msg"></div></td>

        </tr>
        <tr>
          <td class="key"><label for="name"> Email: </label></td>
          <td><input type="text" size="50" maxlength="100" name="email" id="email" class="inputbox"></td>
        </tr>
        <tr>
          <td class="key"><label for="name"> Password: </label></td>

          <td><input type="password" size="50" maxlength="100" name="password" id="password" class="inputbox"></td>
        </tr>
        <tr>
          <td class="key"><label for="name"> Verify Password: </label></td>
          <td><input type="password" size="50" maxlength="100" name="password2" id="password2" class="inputbox"></td>
        </tr>
      </table>
    </fieldset>

  </div>
  <div class="col width-60">
    <fieldset class="tpj_fieldset">
      <legend>Experience / Education</legend>
      <table class="admintable">
        <tr>
          <td class="key"><label for="name"> Current Position: </label></td>

          <td><input class="inputbox" type="text"...

CSS

username_validate.php
#####################

Site root

http://www.jobodisha.com/component/tpjobs/regjobseekernew.html

<?php
    defined('_JEXEC') or die('Restricted access');
     
     
    $user = strip_tags(trim($_REQUEST['username']));
     
    if(strlen($user) <= 0)
    {
      echo json_encode(array('code'  =>  -1,
      'result'  =>  'Invalid username, please try again.'
      ));
      die;
    }
     
    // Query database to check if the username is available
    $query = "Select a.username FROM #__users where username = '$user' ";
    // Execute the above query using your own script and if it return you the
    // result (row) we should return negative, else a success message.
     
    $db =& JFactory::getDBO();
     
    $result = $db->setQuery($query);
    
    $available = mysql_num_rows($result);
     
    if($available)
    {
      echo json_encode(array('code'  =>  1,
      'result'  =>  "Success,username $user is still available"
      ));
      die;
    }
    else
    {
      echo  json_encode(array('code'  =>  0,
      'result'  =>  "Sorry but username $user is already taken."
      ));
      die;
    }
    die;
?>

JavaScript

<script type="text/javascript">
        <!--
  //function to create ajax object
  function pullAjax(){
    var a;
    try{
      a=new XMLHttpRequest()
    }
    catch(b)
    {
      try
      {
        a=new ActiveXObject("Msxml2.XMLHTTP")
      }catch(b)
      {
        try
        {
          a=new ActiveXObject("Microsoft.XMLHTTP")
        }
        catch(b)
        {
          alert("Your browser broke!");return false
        }
      }
    }
    return a;
  }
 
  function username_validate()
  {
    site_root = '';
    var x = document.getElementById('username');
    var msg = document.getElementById('msg');
    user = x.value;
 
    code = '';
    message = '';
    obj=pullAjax();
    obj.onreadystatechange=function()
    {
      if(obj.readyState==4)
      {
        eval("result = "+obj.responseText);
        code = result['code'];
        message = result['result'];
 
        if(code <=0)
        {
          x.style.border = "1px solid #FF0084";
          msg.style.color = "#FF1A00";
        }
        else
        {
          x.style.border = "1px solid #008C00";
          msg.style.color = "#73880A";
        }
        msg.innerHTML = message;
      }
    }
    obj.open("GET",site_root+"username_validate.php?username="+user,true);
    obj.send(null);
  }
  //-->
</script>