# Javascript, validate form before submit



## Lori713 (Sep 8, 2003)

I should probably start out by saying I know very little about javascript, and I'm using code I saw in a book I bought to validate my form.

I'm trying to validate a text field on my form before the form is submitted. I'd like an alert to pop up if the text field has invalid data or is blank (invalid data is anything but digits).

I have tried putting in "onclick", "onblur", "onsubmit", "onchange" in the form area, the text area, and on the submit button area (i.e., like what I have below in the form tag).

I either get error messages telling me that it's an invalid method for that object, OR it will give me the correct alert for a blank field, but then continue on to processing the blank field value (not what I want), OR it won't recognize that I've typed letters in the text field instead of digits (which is what I want the javascript to check). In all instances, the form continues to process even though I'm trying to get it to return false and go back to the text area.

Here is what I believe are the relevant pieces of what I have so far:


```
<form name="mainmenu" method="post" action="nc_rpt_summary.pl" onsubmit="validate();">

<table>
<tr>
<td class=welc width="8%">Step 3:</td>
<td class=welc width="15%">Enter a Project</td>
<td class=welc width="10%"><input type="text" name="project" size="14" maxlength="14"></td>
<td class=welc width="67%" colspan="2"><input type="checkbox" name="mycheck" value="yes">
    <span   style="cursor:pointer;cursor:hand"
            onmouseover="style.color='red';window.status='Click to get examples of Report Types';"
            onmouseout="style.color='black';window.status='';"
            </span>&nbsp;Exact match?</td></tr>

<tr>
<td class=welc width="8%">Step 4:</td>
<td class=welc width="15%">Submit Report</td>
<td class=welc width="40%" colspan="3"><input  type="SUBMIT"
                                               style="cursor:pointer;cursor:hand;"
                                               value="Submit report request"></td></tr>
</table></form>
```
And my javascript:


```
function validate(theform) {

if  ( theform.value=='' )
    { alert('Project ID is a required field. Please try again.');
      return false;

      if ( theform.value!='' ) 
         { for ( i=0; i<theform.length; i++ )
               { if ( theform.charAt(i) < "0" )
                    { alert('You entered an invalid project. Please try again.');
                      return false;
                    }
                 if ( theform.charAt(i) > "9" )
                    { alert('You entered an invalid project. Please try again.');
                      return false;
                    }
               }
         }
    mainmenu.project.focus();
    }
else { mainmenu.submit() }
}
```
Any ideas on what I'm doing wrong? Thanks!

Lori


----------



## MustBNuts (Aug 21, 2003)

Somewhere in your mainmenu, when you return the false from the validation, you have the kill the process. If you don't, it returns the false but keeps going.


----------



## Lori713 (Sep 8, 2003)

Hmm.... I'm not sure what you mean (or more specifically, where you mean). How does one kill a process within a form? Thanks for any pointers you can give me.


----------



## Lori713 (Sep 8, 2003)

FYI, I also had done a lot of searching through the web based on the error messages I received, looking for answers (that's where I found the stuff to validate zip codes - which is similar to what I want to do). One of the more common solutions involved not having a button named "submit." I don't have any buttons (or any other object) named "submit."


----------



## Lori713 (Sep 8, 2003)

I found the answer at: http://developer.netscape.com/viewsource/husted_formsub.htm

Basically, I ended up changing the type of button (submit) to the type "button" to force it to always run my javascript. Inside the javascript, I then tell it to submit the form if there are no errors.

For future archive searchers: If you'd like the whole program, email me at perlgeek7 [at character] yahoo [dot] com.


----------

