JavaScript Validation

Discussion in 'Web Design and Development' started by carlosbutler, Aug 2, 2009.

  1. macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #1
    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:
    PHP:
    <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
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. thread starter macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #3
    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.
     
  4. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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
     
  5. macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #5
    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.
     
  6. thread starter macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #6
    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?
     
  7. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.

    PHP:
    // 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 -),
    PHP:
    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 as well as some JavaScript for creating masked input fields, 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.
     
  8. macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #8
    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.
     
  9. macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #9
    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
     

Share This Page