Link to home
Start Free TrialLog in
Avatar of reesecup09
reesecup09Flag for United States of America

asked on

check for blank form

Hi - I have an online employment application form that I uses CGI script to send the data to my email. I do not want a blank form to get submitted. I need some simple javascript that can check to see if all fields are empty and if so not to submit the form.  A window can pop up saying something like the form has not been completed. What is the best way to achieve this? Thank you.
Avatar of Kin Fat SZE
Kin Fat SZE
Flag of Hong Kong image

<form name="form1" onsubmit="return validate(this);">

<input type="text" name="text1">
<input type="text" name="text2">
<input type="submit" value="submit!">
</form>

<script type="text/javascript">
function validate(formObj){
  if (formObj.text1.value == ''){
    alert('please input value of text1');
    formObj.text1.focus();
    return false;
  }else   if (formObj.text2.value == ''){
    alert('please input value of text2');
    formObj.text2.focus();
    return false;
  }
  return true;
}

</script>
Avatar of reesecup09

ASKER

If I use this script will I need to check each individual field to see if all of them are empty?
SOLUTION
Avatar of Kin Fat SZE
Kin Fat SZE
Flag of Hong Kong image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I am not good with javascript at all. I know just the basics so excuse my dumbness here, but do I just add the code to my html code as you have it or do I need to rename something. My form name is jobapp.
DO I ADD THIS BEWTEEN HEAD TAG?
<script type="text/javascript">
function validate2(formObj){
  var i=0;
  var formChilds = formObj.childNodes;
  var allBlank = true;
  for (i=0; i<formChilds.length;i++){
    if (formChilds[i].nodeName=='INPUT' && formChilds[i].type == 'text'){
      if (formChilds[i].value!=''){
        allBlank = false;
      }
    } 
  }
  
  if(allBlank){
    alert('no one field was inputted');
  }
  return (!allBlank);
}
 
</script>
 
ADD THIS TO FORM TAG?
onsubmit="return validate2(this);"

Open in new window

I just tried it and I get an alert when trying to submit the blank form. How many text boxes have to be filled in before the form can be submitted? Because I tried filling out two text bixes and hitting submit and I still got the alert.
example of #24083518
it only alert when all of field are empty..
do I need to rename something? No, the formObj passed into function validate2
How many text boxes have to be filled in before the form can be submitted? more than zero (1,2,3,4.....)
Because I tried filling out two text bixes and hitting submit and I still got the alert. ?  I tested on ff3, ie6.. that's okey....
And yes, put the script in the head and modify your form tag as shown in the example. You need to scroll to see the form
Thanks. I get it now. But how do I fix ithe problem with alert? It should only pop up if the form is blank.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The script above is not what I used. I was using the one with childNodes. It's working now. Thank you you both so much for your help and patience. I appreciate it!
I know you did not, I just rewrote the script for you :)