Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with form validation syntax

    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

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..
    Code:
    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.
    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.")
    else
    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"

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    A possible approach: screen user input to prevent improper entries in the first place. Just a rough idea:


    <html>
    <head>
    <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;
    }

    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) {
    alert(msg);
    el.focus();
    return false;
    }
    }
    return true;
    }

    </script>
    </head>
    <body>
    <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">
    </form>
    </body>
    </html>


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

  • #5
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    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
    Zvona
    First Aid for
    Web Design

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    download and study the code for my validation script. It uses regular expressions to validate formats.

    http://www.peterbailey.net/jsdemo

  • #8
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    debugging now

    I'm getting all kinds of errors now. The link to my code is:

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

  • #9
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #10
    New Coder
    Join Date
    Jun 2002
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Computers are simple for the complex mind, yet complex for the simple mind

  • #11
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •