Validate Required Input

[Total: 0    Average: 0/5]

This example shows how to validate user input in a form.

Head Code:

<script Language="JavaScript"> 

var _T = "locked"; 
var _F = "unlocked"; 
function lockIt(_P) 
{ 
  var _L =document.frmApprove.lck.value; 
if(_L==_P)return; 
document.frmApprove.cboName.disabled=(document.frmApprove.lck.value=(_L==_F)?_T:_F)==_T; 
document.frmApprove.strEmpName.disabled=(document.frmApprove.lck.value=(_L==_F)?_T:_F)==_T; 

} 

function isDis() { 
return (document.frmApprove.lck.value==_T); 
} 

function SubmitAction() { 
//check to see if Approve/Forward or Validate To has a value  
//alert("Please select a User");=
if( !document.frmApprove.rdoApprove[2].checked ||
	document.frmApprove.cboName.selectedIndex == 0 ||
	document.frmApprove.cboName.options[document.frmApprove.cboName.selectedIndex].value =='')
alert("Please select a User"); 
else {
  alert("SI["+document.frmApprove.cboName.selectedIndex+"]n"+
        "AP["+document.frmApprove.rdoApprove[2].checked+"]n"+
        "op["+document.frmApprove.cboName.options[document.frmApprove.cboName.selectedIndex].value+"]");
  //document.frmApprove.submit(); 
  }
}
</script> 

Body Code:

<!--Start Form here --> 
This form must have a user selected and the approve radio button clicked to accept data.
<form Name="frmApprove" Id="frmApprove" action="http://www.js-examples.com/" method="post"> 
  <table align=center> 
    <tr> 
      <td colspan="3"><font face="Arial" size="2"> 
        <INPUT type=radio id="rdoApprove" name="rdoApprove" onclick=lockIt(_F) value='Validate'> 
        Validate - Please select a User Name</font></td> 
    </tr> 
    <tr> 
      <td height="23" colspan="3"><font face="Arial" size="2"> </font></td> 
    </tr> 
    <tr> 
      <td colspan="3"><font face="Arial" size="2"> 
        <INPUT type=radio CHECKED id="rdoApprove" name="rdoApprove" onclick=lockIt(_F) value="ApproveForward"> 
        Approve / Forward</font> <font face="Arial" size="2">- Please select a 
        User Name</font></td> 
    </tr> 
    <tr> 
      <td height="37" width="18%"><font face="Arial, Helvetica, sans-serif" size="2"><b>User 
        Name</b></font></td> 
      <td height="37" width="27%"><font face="Arial" size="2"> 
        <INPUT id="strEmpName" name="strEmpName" value="You" onfocus=if(isDis())blur();> 
        </font></td> 
      <td height="37" width="55%"></td> 
    </tr> 
    <tr> 
      <td width="18%"> </td> 
      <TD width="27%"> 
        <select name="cboName" id="cboName" onfocus=if(isDis())blur();> 
<option value="">Please select a User</option> 
<option value="me">ME</option>
        </select>     

        </TD> 
    </tr> 
    <tr> 
      <td colspan="3"><font face="Arial" size="2"> 
      <INPUT type=radio id="rdoApprove" name="rdoApprove" onclick=lockIt(_T)  value="FinalApproval"> 
        <INPUT id=lck name=lck type=hidden value=unlocked> 
        Final Approval</font> </td> 
    </tr> 
    <tr> 
      <td colspan="3"> </td> 
    </tr> 
    <tr> 
      <td height="35" colspan="3"><font face="Arial" size="2"> <b>Note (optional)</b></font> 
      </td> 
    </tr> 
    <tr> 
      <td colspan="3"> 
        <textarea cols="60" name="txtApproveNotes" rows="4" style="HEIGHT: 86px; WIDTH: 355px"></textarea> 
      </td> 
    </tr> 
    <tr> 
      <td align=left><a href="javascript:SubmitAction()">APPROVE</a></td> 
      <td> </td>
      <td align=left><a href="#">CANCEL</a></td> 
    </tr> 
  </table> 
</Form> 

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *