PDA

View Full Version : Help with form validation syntax

jscriptgirl
08-05-2002, 06: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,
jscriptgirl

ShriekForth
08-05-2002, 06: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

(TheNumber<="9")&&(TheNumber>="0")

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){
return((dig<="9")&&(dig>="0"));
}

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">
</form>
<script>
function validateForm(){
if(!number(document.temp.myNum.value)){
alert("'"+document.temp.myNum.value+"' is not a valid number");
return false;
}
else{ //It passed the number test
return true;
}
}
</script>

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.

ShriekForth

jscriptgirl
08-06-2002, 04: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 = ""
else
IF document.theForm.numberbox1.value = ""
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, 05:30 AM
A possible approach: screen user input to prevent improper entries in the first place. Just a rough idea:

<html>
<title>untitled</title>
<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;
}

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

</script>
<body>
<font color="red">*</font>Required field<br>
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="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">
</form>
</body>
</html>

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

Zvona
08-06-2002, 09: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 :
http://www24.brinkster.com/zvona/formCalculate.html

Testing, whether a number is inserted in field (also decimal numbers both with "." and "," characters). Function returns an array of booleans (true/false) :
http://www24.brinkster.com/zvona/htmlexa.asp?article=05

ShriekForth
08-06-2002, 07: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.
so..

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.

ShriekForth

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

http://www.peterbailey.net/jsdemo

jscriptgirl
08-07-2002, 12:36 AM
I'm getting all kinds of errors now. :( The link to my code is:

http://www.mhcable.com/~carson1/project.html

jscriptgirl
08-07-2002, 12:59 AM
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!

snakedevil1
08-07-2002, 01: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.

jscriptgirl
08-07-2002, 01: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.

JohnKrutsch
08-07-2002, 02: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.