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 2 of 2
  1. #1
    Regular Coder the-dream's Avatar
    Join Date
    Mar 2007
    Location
    Northamptonshire, UK
    Posts
    477
    Thanks
    8
    Thanked 4 Times in 4 Posts

    Live form validation!

    Hi, before you say look on google i have.


    What i am trying to do is i have a form on my website and i want when the user clicks out of the box it validates it in real time. So if its i valid put an image next to the field. And if its not then put a different image next to it.

    I usually only use PHP and not much JS i am sorry if this is a noobish question. I don't know.

    Please help!



    Thanks,
    ~ Christian

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    Hello Christian,

    I have created a small example to help you out.

    Here it goes...just copy and paste into a new file

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
    <
    meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <
    meta http-equiv="content-language" content="en" />
    <
    title>OnBlur Example</title>
    <
    script type="text/javascript">
    /**
    *    checkMe expects 
    *     a reference to table cell (well, any tag with a given id really)
    *       where the image will be displayed in case of success or error.
    */
    function checkMedisplayId) {
        
    // create a pattern to match the email address
        
    var email_pattern =  /^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i
        
    // get a reference to the location where we want to display the image
        
    var display_area window.document.getElementByIddisplayId );
        
    // get a reference to the form 
        
    var me_form window.document.forms[0];
        
    // get a reference to the text field
        
    var email me_form.email;
        
    // validate if email input text field contains an email or not
        
    if( email.value.matchemail_pattern) ) {
            
    display_area.innerHTML "Thanks, email format was accepted. :)";
        } else {
            
    display_area.innerHTML "Sorry, but text supplied does not validate as an email address";
        } 
    //-- ends else
    //-- ends function checkMe
    </script>
    </head>
    <body>
    <form method="get" action="#">
        <table>
            <tr>
                <td>
                    Your Email:
                </td>
                <td>
                    <input type="text" name="email" size="35" onfocus="javascript: window.document.getElementById('display_area').innerHTML='Checking....';" onblur="javascript: checkMe('display_area');"/>
                </td>
                <td id="display_area">
                    &nbsp;
                </td>
            </tr>
        </table>
    </form>
    </body>
    </html> 
    Cheers,
    Ess


  •  

    Posting Permissions

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