JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<form name="sai_frm_incl_usua1" action="sai_incl_usua" method="POST"  onsubmit="return f_veri_dados();">
		<table border="0" width="100%">
			<tr>
				<td width="30%" align="right" >
					<font face="arial" color="blue" size="-1" disabled="disabled">Nome do Usuário :
					</font>
				</td>
				<td width="29%" align="left">
					<input type="text" align="left" name="tx_nome_usua" id="nome" onkeypress="javascript:return f_so_letra(event);" size="15" maxlength="40" value="">
				</td>

			</tr>
			<tr>
				<td align="right" >
					<font face="arial" color="blue" size="-1">RG do Usuário :</font>
				</td>
				<td>
					<input name="tx_rg_usua" method="POST" type="text" id="rg" onkeydown="Mascara(this,Rg);" onkeypress="Mascara(this,Rg);" onkeyup="Mascara(this,Rg);" maxlength="13" size="16">
				</td>
			</tr>
			<tr>
				<td align="right">
					<font face="arial" color="blue" size="-1">Telefone do Usuário :</font>
				</td>
				<td>
					<input name="tx_fone_usua" id="tx_fone_usua" method="POST" type="text" size="15" maxlength="14" onkeydown="Mascara(this,Telefone);" onkeypress="Mascara(this,Telefone);" onkeyup="Mascara(this,Telefone);" onclick="TelefoneCall">
				</td>
				<td>
					<input type="hidden" name="w_nome_usua" value="<?=$w_nome_usua;?>">
				</td>
			</tr>
			<tr>
				<td align="right">
					<font face="arial" color="blue" size="-1">Unidade ou Setor :</font>
				</td>
				<td>
				<?
				$w_querybusca="SELECT * FROM sai_cad_unid_seto WHERE fk_seq_loca = $w_cb_local ORDER BY desc_unid_seto;";
				$w_queryresultado=f_class_conecta_bd($w_querybusca);
				if(pg_num_rows($w_queryresultado)==0)
				{
					print("<script language=javascript>
								
				}

				print('<select name="cb_fk_seq_unid_seto" style="font-size:11; color:#FF7F00; width:250">'."\n");
				while($w_registro=pg_fetch_object($w_queryresultado))
				{
					print('<option...

JavaScript

function f_so_letra(w_tecla){
	var w_cod_ascii = (window.Event) ? w_tecla.which : w_tecla_keyCode;
   	if (w_cod_ascii >= 65 && w_cod_ascii <= 90 || w_cod_ascii >= 97 && w_cod_ascii <= 122 || 
       	w_cod_ascii == 94 || w_cod_ascii == 45 || w_cod_ascii == 126 || w_cod_ascii == 32 ||
        w_cod_ascii == 0 || w_cod_ascii == 8) return true;
   	return false;  	
}
function f_so_numero(ie, ff) {
    if (ie) {
        tecla = ie;
    } else {
        tecla = ff;
    }
 
    if ((w_cod_ascii  >= 48 && w_cod_ascii  <= 57) || (w_cod_ascii  == 8) || (w_cod_ascii  == 13) || (w_cod_ascii  == 9) || (w_cod_ascii  == 46)) {
        return true;
    }
    else {
        return false;
    }
}


function f_veri_dados()
{
	w_form="sai_frm_incl_usua1";
//nome
	if(document.forms[w_form].tx_nome_usua.value=="")
	{
		alert("Informe o nome do usuário!!");
		document.forms[w_form].tx_nome_usua.focus();
		return false;
	}
//setor
	if(document.forms[w_form].cb_fk_seq_unid_seto.value =="0")
	{
		alert("Informe a unidade ou setor!!");
		document.forms[w_form].cb_fk_seq_unid_focus();
		return false;
	}
//tel
	tx_fone_usua=document.forms[w_form].tx_fone_usua.value;
	if(tx_fone_usua=="")
	{
		alert("Informe o Telefone!!");
		document.forms[w_form].tx_fone_usua.focus();
		return false;
	}
//rg
	tx_rg_usua=document.forms[w_form].tx_rg_usua.value;
	if(tx_rg_usua=="")
	{
		alert("Informe o RG!!");
		document.forms[w_form].tx_rg_usua.focus();
		return false;
	}
//login
	tx_logi_usua=document.forms[w_form].tx_logi_usua.value;
	if(tx_logi_usua=="")
	{
		alert("Informe o Login!!");
		document.forms[w_form].tx_logi_usua.focus();
		return false;
	}
//senha
	tx_senh_usua=document.forms[w_form].tx_senh_usua.value;
	if(tx_senh_usua=="")
	{
		alert("Informe a senha!!");
		document.forms[w_form].tx_senh_usua.focus();
		return false;
	}
return true;
}

function formatar_mascara(src, mascara)
{
	var campo=src.value.length;
	var saida=mascara.substring(0,1);
	var...