JS form verification function not working

Question

I have this form with a JS function to verify that there are no blank fields, but it doesn't work.

<head>
  <script language='javascript'>
      function verifyForm(){
        var msg='';
        if(document.getElementById('field1').value==''){msg+='Field 1  \n';}
        if(document.getElementById('field2').value==''){msg+='Field 2  \n';}
        if(msg!=''){
            alert('The following entries are empty:\n\n'+msg);
            return false
        }else{
            return true }
        }
  </script>
</head>

<body>
   <form name="frmRequest2" id="frmRequest2" action="<? echo $submitURL2; ?>" method="post" onsubmit='return verifyForm();'>
   Please answer all questions and enter "NONE" where appropriate.

  <table>
    <tbody>
      <tr>
        <th>List any items you already have</th>
        <th>List any items you need to get</th>
      </tr>
      <tr>
        <td><textarea name="field1" id="field1" rows="2" cols="39"> <? echo $field1; ?> </textarea></td>
        <td><textarea name="field2" id="field2" rows="2" cols="39"> <? echo $field2; ?> </textarea></td>
      </tr>

      <tr>
        <td colspan="4" align="center" valign="top" style="border-width: 0px 0px 0px 0px;"> <br />
        <input name="submit" value="Submit Data" type="submit"/> </td>
      </tr>      
    </tbody>
  </table>
  </form>
</body>

The alert that you coded into your validation routine. (The point is moot anyway because I've verified that by fixing things mentioned in the answers below, it works fine.) — Pointy
– Pointy, Commented Jul 9, 2010 at 14:51

Ryan Freebern · Accepted Answer · 2010-07-09 14:53:35Z

4

You have extra closing curly braces (}) after your if clauses.

Edited to add: The following code works as expected and ignores any leading/trailing whitespace in the fields:

<html>

<head>
  <script language='javascript'>
      function verifyForm(){
        var msg='';
        if(document.getElementById('field1').value.replace(/\s+$|^\s+/, '') == '') {msg+='Field 1  \n';}
        if(document.getElementById('field2').value.replace(/\s+$|^\s+/, '') == '') {msg+='Field 2  \n';}
        if(msg!=''){
            alert('The following entries are empty:\n\n'+msg);
            return false;
        }else{
            return true;
        }
      }
  </script>
</head>

<body>
   <form name="frmRequest2" id="frmRequest2" action="" method="post" onsubmit='return verifyForm();'>
   Please answer all questions and enter "NONE" where appropriate.

   <table>
      <tbody>
      <tr>
        <th>List any items you already have</th>
        <th>List any items you need to get</th>
      </tr>
      <tr>
        <td><textarea name="field1" id="field1" rows="2" cols="39"></textarea></td>
        <td><textarea name="field2" id="field2" rows="2" cols="39"></textarea></td>
      </tr>

      <tr>
        <td colspan="4" align="center" valign="top" style="border-width: 0px 0px 0px 0px;">
          <input name="submit" value="Submit Data" type="submit"/>
        </td>
      </tr>
    </tbody>
  </table>

 </form>
</body>

</html>

edited Jul 9, 2010 at 14:53

answered Jul 9, 2010 at 14:27

Ryan Freebern

664 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pointy Over a year ago

When I take that code and remove the curly braces, and fix the minor markup typos, it works fine. Use Firebug or something to make sure you don't have some other Javascript error.

ChuckO Over a year ago

I went over my original code and found a missing id. Once I corrected that, the function worked. Thank you all.

Eric Wendelin · Accepted Answer · 2010-07-09 14:22:30Z

1

You're missing a ">" on your closing "[/head]" tag, you're not closing your "[form]" tag. That could cause a problem.

answered Jul 9, 2010 at 14:22

Eric Wendelin

44.6k9 gold badges73 silver badges94 bronze badges

1 Comment

ChuckO Over a year ago

The ">" and "</form>" are there in the original code. I lost them here in the example.

Quentin · Accepted Answer · 2010-07-09 14:29:59Z

1

You have a space on each side of each of your default value. "" != " "

answered Jul 9, 2010 at 14:29

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

ChuckO Over a year ago

The extra spaces are not in the original code. I only added it to the example for clarity.

Quentin Over a year ago

Thus providing a good example of why you should provide your code and not something that is merely like your code.

Haydar · Accepted Answer · 2010-07-09 15:15:19Z

0

As a general rule, I like to trim the spaces of inputs. Does changing the if clause to

document.getElementById('field1').value == '' to
document.getElementById('field1').value.trim() == ''

Help at all?

Also, to reiterate what David suggested, your original code looks like

<textarea name="field1" id="field1" rows="2" cols="39"><? echo $field1; ?></textarea>

and not

<textarea name="field1" id="field1" rows="2" cols="39"> <? echo $field1; ?> </textarea>

Notice the spaces?

answered Jul 9, 2010 at 15:15

Haydar

1,2923 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

JS form verification function not working

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related