PDA

Click to See Complete Forum and Search --> : Form Validation

Lisa9999
09-27-2003, 11:07 PM
Hello - I am trying to validate a form using a script from Tom Negrino's Javascript book. Thought I had it working perfectly however if I enter a numeric value and follow it with alpha characters.. the script does not return an error like it does if you begin with an alpha character. ?

This is the code I'm using to verify a phone number:

function isNum(passedVal) {
if (passedVal == "") {
alert("You must enter your phone number") //cannot have an empty Phone Field
return false;
}
for (i=0; i < passedVal.length; i++) {
if ((passedVal.charAt(i) < "0") || (passedVal.charAt(i) > "9")) {

alert("Your phone number must be numeric and 10 digits") //must be numeric
return false
}
if (passedVal.length < "10") {
alert("Your phone number must be 10 digits") //must be 10 digits
return false
}
return true
}
}


------------- ( Here are the specs on the form fields.. i omitted to enter them when I first posted)
<body bgcolor="#CCFF99">
<form onsubmit="return submitIt(this)" action="yballoonfinalize.html" method="get" name="myform" target="_self" id="myform" >
<p><img src="balloon header.jpg" alt="balloon LOGO" width="300" height="75" />
</p>
<p class="bold">Please - No Slashes/Dashes/or Hyphens! </p>
<p></p>
<span class="bold">Name:
<input name="userName" type="text" id="userName" onblur="setCookie()" onchange="validuserName(this.value)" size="15" maxlength="20" />
</span></p>
<p class="bold"> Phone Number:
<input name="Phone" type="text" class="bold" id="Phone" onchange="isNum(this.value)" size="10" maxlength="10" length="10" />
</p>
<p class="bold">Credit Card Number:
<input name="Ccard" type="text" class="bold" id="Ccard" onchange="isNum2(this.value)" size="16" maxlength="16" length="16" />
</p>
<p class="bold">Expiration Date:
<input name="Expdate" type="text" class="bold" id="Expdate" onchange="isNum3(this.value)" size="4" maxlength="4" length="4" />
</p>
<p class="bold">Balloon Color:
<input name="yellowField" type="text" readonly="true" id="yellowField" value="yellow" size="10" maxlength="10" onblur="setCookie()" />
</p><p>
<input name="Submit" type="submit" value="Submit" />
</p></span></form></body>

Where have I gone wrong?
Thanks!
Charles
09-28-2003, 07:49 AM
A couple of things.

1) First, lets start with valid mark up and let's use HTML since it's easier than XHTML.

2) Rid yourself of that book. You should be using Regular Expressions to validate your fields.

3) Phone numbers can be expressed a number of ways; and some of use letters in our exchanges. Mine is BE5. The following will take anything that might be a valid 10 digit number and convert it to a standard format.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; font-weight:bold; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
function require (f) {for (var i=1; i<arguments.length; i++) {if (!/\S/.test(f[arguments[i]].value) || f[arguments[i]].value == 'NaN') {alert('A required field was left empty.'); f[arguments[i]].focus(); return false}}}

function PhoneNumber (s) {this.number = s.replace(/^[01]/, '').replace (/([a-pr-y])/gi, function () {return {a:2, b:2, c:2, d:3, e:3, f:3, g:4, h:4, i:4, j:5, k:5, l:5, m:6, n:6, o:6, p:7, r:7, s:7, t:8, u:8, v:8, w:9, x:9, y:9}[arguments[1].toLowerCase()]}).match(/\d/g)}

PhoneNumber.prototype.toString = function () {return this.number.length == 10 ? [this.number[0], this.number[1], this.number[2], '-', this.number[3], this.number[4], this.number[5], '-', this.number[6], this.number[7], this.number[8], this.number[9]].join('') : NaN}
// -->
</script>

<form onsubmit="return require(this, 'userName', 'phone', 'cCard', 'expDate')" action="yballoonfinalize.html" method="get">
<div>
<label>Name:<input name="userName" type="text"></label>
<label>Phone Number:<input name="phone" type="text" onchange="this.value = new PhoneNumber(this.value)"></label>
<label>Credit Card Number:<input name="cCard" type="text"></label>
<label>Expiration Date:<input name="expDate" type="text"></label>
<label>Balloon Color:<input name="yellowField" type="text" readonly value="yellow">
<button type="submit">Submit</button>
</div>
</form>
Lisa9999
10-07-2003, 03:17 PM
I actually got the form validation to work using Negrino's information from the book - however, I appreciate your reply. I have another question and am NOT asking for the answer, but rather to tell me what I'm doing wrong.

1.) I set a cookie - works fine - it has a name of userName=value1, blueField=value2, redField=value3 and so on
2.) I am trying to split the cookie and pull out the value of userName using the cookieVal functionand simply greet the user :
-------------------------------------------------------
--------------------------------------------------------
function cookieVal(userName) {
thisCookie=document.cookie.split("; ")
for (i=0; i++;) {
if (userName == thisCookie[i].split("=")[0]) {
document.write(thisCookie[i].split("=")[1])
}
}
return 0
}
--------------------------------------------------------
in the body tag I call the cookieVal() with an onload ...
Here is the problem:
after splitting the cookie above line 2 this is what happens

if I simply do a docoment.write(document.cookie) ---> I get:
userName=Lisa Hinson,blueField=blue
if I try to document.write as above... --->
I get nothing..

What am I missing????
Thanks
sam2003
10-07-2003, 04:39 PM
I think your for loop should look like this

for (i=0; i< thisCookie.length ;i++) {
if (userName == thisCookie[i].split("=")[1]) {
document.write(thisCookie[i].split("=")[1]) ;
}
}