View Full Version : Help with form validation syntax

08-05-2002, 05:02 PM
Hello! I have an assignment in which I have to create a Form and then check the input via form validation and then calculate the input.

I know what I want to do but I don't know how to do it. I want to take the information from the form and validate it in a function but I'm confused about how to do that. Some of the input fields will be text and others will be numbers. The text, I just have to ensure there is SOMETHING typed in so the "" would work just fine. What are the different types of validation used for numbers?

The other question I have is do I need to create a new function to calculate the input after it has been validated or do I calculate it in one function? Like an IF statement that says IF the input checks out okay then calculate it?

I apologize, I'm VERY new to javascript and if I haven't given you the right information then just let me know. Any ideas or explanations would be appreciated.

Thank you,

08-05-2002, 05:29 PM
This just becomes a set of simple steps if you look at it the right way, most programming is. It could many simple steps in a complex logic, but in the end the they are simple.
As to the first part of your question how to decide if it is all numbers, you could simply check each character in the field to see if it is > 0 and is < 9. Easy enough statement


But, this only works on a single digit, so itterating through each character on a string and passing it to a function that simply check to see if it is, or is not a number will work. If we ever encounter a character that is not a number, then it is not a number. So something like this..

function number(tf){
for (x=0;x<tf.length;x++){
if (!isDigit(tf.charAt(x))){
return false;
return true;

function isDigit(dig){

This only works for whole numbers, for decimal values additional checks must be made. Probably in the number function. But as it is above, you would only need to pass it the value of the form item. If it was a number, it would return true, if it was not, you would get a false. So the next function up would probably handle this portion, as well as reporting the error. I don't know how you want to do that. You could do this a field at a time, and have an error come up for each field in the form of an alert, or wait until they try to submit the form, for click on a validate button.
This one will wait until the form is posted, and using on submit we will not send this form until they have a valid number in it.

<form name=temp action=post onSubmit="return validateForm()">
<input type="text" name="myNum">
<input type="submit">
function validateForm(){
alert("'"+document.temp.myNum.value+"' is not a valid number");
return false;
else{ //It passed the number test
return true;

Hope that gives you some ideas. In the validateForm function, you could start checking each field in the form and then report the error the way you choose. Append them all to a string and then display that as an alert at the very end, or show a different page. There are a dozen ways to do that.


08-06-2002, 03:22 AM
Thank you for that explanation!

What I'm trying to figure out now is how to create an IF statement that will run through the fields, validate that there is something in them and then calculate the fields that have numeric information.

Do I start the function like this?

function validate()
IF document.theForm.firstName.value = ""
alert("Enter in your first name.")
IF document.theForm.numberbox1.value = ""
alert("Enter in the cost")
var total = numberbox1.value - deductbox.value

The result has to be displayed into another input box. I've never done this before. It has to be set to display zero initially which I've done with value="0"

08-06-2002, 04:30 AM
A possible approach: screen user input to prevent improper entries in the first place. Just a rough idea:

<script type="text/javascript" language="javascript">

function isNumeric(e) {
if (k = e.keyCode) return ((k>47 && k<58) || k == 8);//don't forget the backspace!
if (k = e.which) return ((k>47 && k<58) || k == 8);
return true;

function isAlpha(e) {
if (k = e.keyCode) return (((k>64 && k<90) || (k>96 && k<123)) || k == 8);
if (k = e.which) return (((k>64 && k<90) || (k>96 && k<123)) || k == 8);
return true;

function totalit(field) {
var el, subtotal = 0, e = 0, f = field.form;
while (el = f.elements[e++])
if (el.value && el.name != 'total' && !isNaN(parseInt(el.value)))
subtotal += parseInt(el.value);
f.total.value = subtotal;

var msg = 'Please fill in all required fields.';

function checkform(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.type == 'text' && el.required && !el.value) {
return false;
return true;

<font color="red">*</font>Required field<br>
<form action="javascript&#58;alert('Submitted !')" method="post"
onsubmit="t1.required=true;t2.required=true;return checkform(this)">
<input type="text"
onkeypress="return isNumeric(event)"
onblur="totalit(this)"> [NUMBER 1]<br>
<input type="text"
onkeypress="return isNumeric(event)"
onblur="totalit(this)"> [NUMBER 2]<br>
<input type="text"
onkeypress="return isNumeric(event)"
onblur="totalit(this)"> [NUMBER 3]<br>
<input type="text" name="total" value="0" readonly="readonly"> {total}<br><br>
<input type="text" name="t1"
onkeypress="return isAlpha(event)"> (TEXT 1)<font color="red">*</font><br>
<input type="text" name="t2"
onkeypress="return isAlpha(event)"> (TEXT 2)<font color="red">*</font><br><br>
<input type="submit" value="DONE">

Just the usual mishmash; see if anything looks interesting....:)

08-06-2002, 08:51 AM
Once again, I can refer to 3 examples I wrote. Note, that direct linking to Brinkster's server seem to cause problems. Both documents still exists in URLs' below.

Validating whether fields are filled :
http://www24.brinkster.com/zvona/zValidate.html (In Finnish, yet understandable)

Calculating values inputted and preventing character input :

Testing, whether a number is inserted in field (also decimal numbers both with "." and "," characters). Function returns an array of booleans (true/false) :

08-06-2002, 06:12 PM
The logic you have there is a good start. To actually put the total in another box is quite easy. You just reference the value of the form field as you would when reading from it.

document.formName.itemTotal.value = parseFloat(document.formName.item1.value) + parseFloat(document.formName.item2.value) ;

The parseFloat will strip off any extra white space, and or letters This should not happen because of the validation, but better to be safe. If there were characters in it would be contained like a sting. Put an input type text on the page with the name of your total field and to have it start at 0 just place that as the value, it will be overwritten by the script.

<input type="text" name="itemTotal" value="0">

You could total the amount as they enter it as in the example adios has, or wait until the user hits submit, and all your validation is done. It's really up to you|client|spec if the validation is to occur inline, or if they want them all displayed at once after the user tries to submit.


08-06-2002, 06:47 PM
download and study the code for my validation script. It uses regular expressions to validate formats.


08-06-2002, 11:36 PM
I'm getting all kinds of errors now. :( The link to my code is:


08-06-2002, 11:59 PM
Disregard my post because I'm getting it working now. :) I'll let you know if I encounter any more problems down the line. Thanks everyone for the help!

08-07-2002, 12:13 AM
i won't tell u (even if u do already have a thousand answers) because this is using a concept called CHEATING! LOL Good luck, i'll be telling ur teacher.

08-07-2002, 12:18 AM
Actually I am not cheating because I'm not asking for someone to do my homework I'm asking for help. I'm asking for help debugging MY work NOT anyone elses. I fail to see how that is cheating and in fact my teacher does permit this.

08-07-2002, 01:40 AM
Easy there snakedevil. As a teacher I can assure you that this is not cheating. This is called collaboration, and if students fail to learn to collaborate then their use in the corporate world is severely limited.

Lets all try to stay on topic here. jscriptgirl is spot on in pointing out that she came here with her own logic and code snippets looking for help, not for handouts.