PDA

View Full Version : JavaScript Validation




carlosbutler
Aug 2, 2009, 07:23 PM
I have been playing around with JavaScript and PHP in the last few days and have not bee able to get this to work;

I am trying to get a form that emails details as if it were a contact form on a website. the email bit was fine. the javascript i am trying to get to validate by simply checking that, for example a number is entered in telephone text box and that the default values are not in the text box's. they disappear once a user clicks on them. so far this is the form

JavaScript Code:

<form name="quotePrice" method="post" action="../scripts/emailQuote.php">
<input type="text" name="name" size="30" value="name" class="mainDivContentBottomFormName" id="name" onclick="if(this.value=='name'){this.value=''};"
onchange="if(document.getElementById('name')=='name' || document.getElementById('phoneNumber')=='phone number' || document.getElementById('email')=='email'){
document.getElementById('theButton').disabled=false
}
else{
document.getElementById('theButton').disabled=true
};" />

<input type="text" name="phoneNumber" size="30" class="mainDivContentBottomFormPhoneNumber" id="phoneNumber" value="phone number"
onclick="if(this.value=='phone number'){
this.value=''
};"
onchange="if(document.getElementById('name')=='name' || document.getElementById('phoneNumber')=='phone number' || document.getElementById('email')=='email'){
document.getElementById('theButton').disabled=false
}
else{
document.getElementById('theButton').disabled=true
};
if(isNaN(document.getElementById('phoneNumber').value)){
alert('please enter a valid phone number, although it is not required.')
};" />

<input type="text" name="email" size="30" class="mainDivContentBottomFormEmail" id="email" value="email address"
onclick="if(this.value=='email address'){
this.value=''
};"
onchange="if(document.getElementById('name')=='name' || document.getElementById('phoneNumber')=='phone number' || document.getElementById('email')=='email'){
document.getElementById('theButton').disabled=false
}
else{
document.getElementById('theButton').disabled=true
};" />
<textarea name="comment" cols="30" rows="4" class="mainDivContentBottomFormComment"></textarea>
<input type="submit" value="get me a quote!" class="mainDivContentBottomFormButton" id="theButton" disabled="disabled" />
</form>

but i cant seem to get this to work. i am doing it all on one page, although doing a separate JS file is easier and would use that if i did this on an actual website



angelwatt
Aug 2, 2009, 07:53 PM
When posting code please use the code tags rather than the quote tag. For JavaScript I generally use the PHP tag because it does syntax coloring. It'll make it much easier to read than the quote tag.

Can you elaborate on what specifically isn't working right? Also, you shouldn't have the submit disabled by default as visitor's with JavaScript disabled (like me) won't be able to use your form.

carlosbutler
Aug 2, 2009, 08:16 PM
sorry, i never did explain the problem:confused: that was odd

anyways, i am trying to get the submit button to enable (disabled=false) if all the fields have been correctly filled in. at the moment i am only trying to make sure that the default text values can not be send, and that the phone number text box will only accept numbers.

i have tried using isNaN but am unable to get it to work properly.

angelwatt
Aug 2, 2009, 09:08 PM
I think you have your true and false values swapped. You currently have the button enabled (disabled=false) when any of the required fields have their default text. The isNaN isn't appropriate for a phone number field as it can have non-numerical data such as - and (). But, if you want to, the way you have it coded you would do !isNaN() because you want that if statement to be true when the field does not have a numerical value. You also don't need semicolons at the end of if/else statements

Cerebrus' Maw
Aug 2, 2009, 09:28 PM
The first thing that strikes me is that when you are using comparative statements, you are not calling the value of the element.

You have: if(document.getElementById('name') == 'name' )

which should be:

if (document.getElementById('name').value == 'name')

for each of your name,email, phone num etc

I believe you are testing the NAMe of the element as opposed to its value, so EG the email input will ALWAYS be email, as that is its name rather then its value, and causing the button to be disabled.

carlosbutler
Aug 3, 2009, 05:10 AM
ah yes .value at the end of each thing. i did not know isNaN did symbols as well. ive only just started JavaScript, so im not sure what other ways there is to check for numbers only, but would it be possible to create an array with 0-9 in it and to get a loop to check through every character and compare it? im not even sure if thats doable?

angelwatt
Aug 3, 2009, 08:25 AM
ah yes .value at the end of each thing. i did not know isNaN did symbols as well. ive only just started JavaScript, so im not sure what other ways there is to check for numbers only, but would it be possible to create an array with 0-9 in it and to get a loop to check through every character and compare it? im not even sure if thats doable?

Regular expressions are a pretty good way to test this type of thing. If you just want to check that they only entered numbers, here's a simple regex for the job.

// Is true when only numbers exist
// Allows for numbers from 7 to 12 digits in length
if (/^[\d]{7,12}$/.test(document.getElementById('phoneNumber').value)) {...}
You can adjust how many digits to allow, just remember different places have different formats for phone numbers. You can also allow for symbols pretty easily too (such as (, ), and -),
if (/^[\d\(\)-]{7,12}$/.test(document.getElementById('phoneNumber').value)) {...}
(The \ is stripped from the regexs above. There should be a \ in front of the d, (, and ) for it to work properly.)

Just remember to account for them as part of the length. Though this regex would also allow a value of "(-)(-)()(()--" to be valid. It can be quite hard to enforce a format and check it thoroughly.

I have some tools that may be of help with your validation. I have a regular expression testing tool (http://www.angelwatt.com/coding/regular_expressions.php) as well as some JavaScript for creating masked input fields (http://www.angelwatt.com/coding/masked_input.php), which may be of use on your phone number field. Just be sure to read the description for details on how to use it and the gotchas when using it.

@Cerebrus' Maw
Good catch. I looked at that a few times and it just didn't sink in that something was missing.

savar
Aug 3, 2009, 03:24 PM
I bet that if you took the time to clean this up, the source of the problem would jump out at you.

Coding standards don't exist to satisfy anally-retentive developers. They exist because messy code is less likely to work properly, and harder to debug. If you care about making something work, then by definition you also care enough to write it cleanly.

Cerebrus' Maw
Aug 3, 2009, 06:05 PM
@Cerebrus' Maw
Good catch. I looked at that a few times and it just didn't sink in that something was missing.

I'm currently designing a site using a lot of Jquery and JS, so I got the damn stuff coming out of my ears. :p