Form validation using Javascript in JSP language without using JSP property

You can call a Javascript function onSubmit of the form, like:

<FORM name="AddEmp" action="EmpAdd.jsp" OnSubmit="return validations ();">

In the function validations (), you can do the various validations and if something is wrong, display an alert and return false, else return true.

Hi, two things:

1.- Wich browser do you use, or could be anyone?
2.- If you post you code I'll be able to make the proper change on it and explain them to you

Javier

I forgot about the length of the fields change this:

function checkDigit(field) {
      
      var c = field.value;
      var d = "";
      
      for (x=0; x<c.length; x++) {
            if (isDigit(c.substring(x,x+1))){
                  if(d.length>3){
                        break;
                  } else {
                        d = d + c.substring(x,x+1);
                  }
            } else {

                  break;

            }
      }
      field.value=d;
      return;
        
}


and this too:

 <br> Pick third number: <select name=num3 onBlur="checkEmpty();" onchange="checkEmpty();">


Javier

If I use the checkEmpty(), checkDigit(field) and isDigit(c) function, How do I alert the user to prompt them to enter a value for the field?

this is the javascript part which I've took from Javier.
<script language="Javascript">
function checkEmpty() {

     if (document.AddEmp.EmpName.value!="")
          if (document.AddEmp.EmpIC.value!="")
               if (document.AddEmp.EmpAdd.value!="")
                   if (document.AddEmp.EmpContact.value!="")
            if (document.AddEmp.Department.value!="")
                if (document.AddEmp.Designation.value!=""){
                  alert("Please fill in all the fields.");
                                       return false;
                              }                    
}

function checkDigit(field) {
     
     var c = field.value;
     var d = "";
     
     for (x=0; x<c.length; x++) {
          if (isDigit(c.substring(x,x+1))){
               if(d.length>3){
                    break;
               } else {
                    d = d + c.substring(x,x+1);
               }
          } else {

               break;

          }
     }
     field.value=d;
     return;    
}

function isDigit(c) {
     return ((c >= "0") && (c <= "9"))
}

</script>

 and this is my form:
            <form method="post" name="AddEmp" action="AddEmp.jsp">
              <table align="center">
                <tr class="form">
                  <td>Employee No. :</td>
                  <td><input type="text" name="EmpNo" size="4" maxlength="4" onBlur="checkDigit(this);" >&nbsp;(a 4-digit number)</td>
                </tr>
                <tr class="form">
                  <td>PIN No. :</td>
                  <td><input type="text" name="EmpPIN" size="4" maxlength="4" onBlur=="checkDigit(this);" >&nbsp;(a 4-digit number)</td>
                </tr>
                <tr class="form">
                  <td>Name :</td>
                  <td><input type="text" name="EmpName" onBlur="checkEmpty();"></td>
                </tr>
                <tr class="form">
                  <td>IC No. :</td>
                  <td><input type="text" name="EmpIC" onBlur="checkEmpty();"></td>
                </tr>
                <tr class="form">
                  <td>Address :</td>
                  <td><input type="text" name="EmpAdd" size="50" onBlur="checkEmpty();"></td>
                </tr>
                <tr class="form">
                  <td>Contact No. :</td>
                  <td><input type="text" name="EmpContact" onBlur="checkEmpty();"></td>
                </tr>
                <tr class="form">
                  <td>Department :</td>
                  <td><select name="Department" onBlur="checkEmpty();" onchange="checkEmpty();">
                      <option selected>&nbsp;</option>
                      <option value="IT">IT</option>
                      <option value="HR">HR</option>
                      <option value="Production">Production</option>
                    </select></td>
                </tr>
                <tr class="form">
                  <td>Designation :</td>
                  <td><select name="Designation" onBlur="checkEmpty();" onchange="checkEmpty();">
                      <option selected>&nbsp;</option>
                                <option value="--">--</option>
                      <option value="Supervisor">Supervisor</option>
                    </select></td>
                </tr>
                <tr>
                  <td><input name="Add" type="image" id="Submit" src="../firework/button/Submit/Add.gif" alt="Add" width="116" height="20" border="0" onclick="return validate()"></td>
                  <td><input type="image" src="../firework/button/Submit/Clear.gif" alt="Clear" name="Clear" width="116" height="20" border="0" onclick="javascript:reset();return false;"></td>
                </tr>
              </table>
            </form>

Don't mind help me check if there's anything wrong with my coding. Thanks very much.

okay... so the rest of the function are correctly used?

Well, I don't think that the checkEmpty () function should be called on-blur of the text in every text-field. Maybe that you can call it on click of the submit-button. Because here, even if you fill something in a text-field and are about to fill something in another text-field, it could be fired and it would say that you have to enter something in the other text-field (which you are about to do anyway).

where to include the alert for the checkDigit function? it doesn't seem to work. when i leave all the fields blank, it will still submit to the action page without checking the validation. Please help.

How to check if a drop down list is empty or selected?

Same method. if ( document.AddEmp.dropDownListName.value == "" )

How can i make sure that the user had enter a 4 digit number in the EmpNo and EmpPIN field? Since EmpContact is also using the same function as EmpNo and EmpPIN, does i need to rename another set of function for EmpContact as EmpContact is not just 4 digit number. Please help asap cause i have wasted most of my time on this validation and i stil have many parts of the project not done yet and the due date is near. this is my codes:

<script language="Javascript">
<!--
function validRequired(formField,fieldLabel)
{
      var result = true;
      
      if (formField.value == "")
      {
            alert('Please enter a value for the "' + fieldLabel +'" field.');
            formField.focus();
            result = false;
      }
      
      return result;
}

function allDigits(str)
{
      return inValidCharSet(str,"0123456789");
}

function inValidCharSet(str,charset)
{
      var result = true;

      // Note: doesn't use regular expressions to avoid early Mac browser bugs      
      for (var i=0;i<str.length;i++)
            if (charset.indexOf(str.substr(i,1))<0)
            {
                  result = false;
                  break;
            }
      
      return result;
}

function validNum(formField,fieldLabel,required)
{
      var result = true;

      if (required && !validRequired(formField,fieldLabel))
            result = false;
 
       if (result)
       {
             if (!allDigits(formField.value))
             {
                   alert('Please enter a number for the "' + fieldLabel +'" field.');
                  formField.focus();            
                  result = false;
            }
      }
      
      return result;
}

function validInt(formField,fieldLabel,required)
{
      var result = true;

      if (required && !validRequired(formField,fieldLabel))
            result = false;
 
       if (result)
       {
             var num = parseInt(formField.value,10);
             if (isNaN(num))
             {
                   alert('Please enter a number for the "' + fieldLabel +'" field.');
                  formField.focus();            
                  result = false;
            }
      }
      
      return result;
}

function checkDropdown(formField, fieldLabel)
{
 if(formField.options[formField.selectedIndex].value == ""
 || formField.options[formField.selectedIndex].value == "NULL")
 {
  alert(fieldLabel);
  formField.focus();
  return false;
 }
 return true;
}

function validateForm(theForm)
{
      // Customize these calls for your form

      // Start ------->
      if (!validNum(theForm.EmpNo,"Employee No.",true))
            return false;
            
      if (!validNum(theForm.EmpPIN,"PIN No.",true))
            return false;
            
      if (!validRequired(theForm.EmpName,"Name"))
            return false;

      if (!validRequired(theForm.EmpIC,"IC No."))
            return false;

      if (!validRequired(theForm.EmpAdd,"Address"))
            return false;
            
      if (!validNum(theForm.EmpContact,"Contact No.",true))
            return false;
            
      if (!checkDropdown(theForm.Department,"Please choose one department."))
            return false;
            
      if (!checkDropdown(theForm.Designation,"Please choose one selection for the position."))
            return false;
      // <--------- End
      
      return true;
}
//-->
</script>

<form action="AddEmp.jsp" method="post" name="AddEmp" onsubmit="return validateForm(this)">
<table><tr class="form">
                  <td>Employee No. :</td>
                  <td><input type="text" name="EmpNo" size="4" maxlength="4">&nbsp;(a 4-digit number)</td>
                </tr>
                <tr class="form">
                  <td>PIN No. :</td>
                  <td><input type="text" name="EmpPIN" size="4" maxlength="4">&nbsp;(a 4-digit number)</td>
                </tr>
                <tr class="form">
                  <td>Name :</td>
                  <td><input type="text" name="EmpName"></td>
                </tr>
                <tr class="form">
                  <td>IC No. :</td>
                  <td><input type="text" name="EmpIC"></td>
                </tr>
                <tr class="form">
                  <td>Address :</td>
                  <td><input type="text" name="EmpAdd" size="50"></td>
                </tr>
                <tr class="form">
                  <td>Contact No. :</td>
                  <td><input type="text" name="EmpContact"></td>
                </tr>
                <tr class="form">
                  <td>Department :</td>
                  <td><select name="Department">
                      <option selected></option>
                      <option value="IT">IT</option>
                      <option value="HR">HR</option>
                      <option value="Production">Production</option>
                    </select></td>
                </tr>
                <tr class="form">
                  <td>Designation :</td>
                  <td><select name="Designation">
                      <option selected></option>
                                <option value="--">--</option>
                      <option value="Supervisor">Supervisor</option>
                    </select></td>
                </tr>
                <tr>
                  <td><input name="Add" type="image" id="Submit" src="../firework/button/Submit/Add.gif" alt="Add" width="116" height="20" border="0" onclick="return validate()"></td>
                  <td><input type="image" src="../firework/button/Submit/Clear.gif" alt="Clear" name="Clear" width="116" height="20" border="0" onclick="javascript:reset();return false;"></td>
                </tr>
              </table>
            </form>

Your validInt () function should probably take an argument as length, which will tell what should be the maximum length or exact length of the field (whichever way you want to interpret it). For Emp No, it will be 4, and so on.