SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validation with Prototype.js

    Hello,
    I was trying to write a validation function with prototype but I am running into an error. It seems like the page is submitting twice and I cant figure out why...If I get an error message, it stays on the screen then they clear out....here is the HTML Page...the call to init.js is just a call to prototype and some other libraries....there are no JS errors according to firebug and it works...just not correctly

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
            <title>The Seeing Eye</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript" src="./development/init.js"></script>
            <script type="text/javascript">
                Event.observe(window, 'load',function() {
                        Event.observe('example','submit', check, false);
                     } ,false);
                    function checkRequired(message) {
        var req = $A(document.getElementsByClassName('required'));
        var i = 1;
        req.each(function (item){
                    if (!$F(item)) {
                        var errLoc = 'error'+i;
                        item.style.border = '1px solid red';
                        $(errLoc).update(message).style.display='block';
                        $(errLoc).innerHTML;
                        this.error = true;
                    }//if...
                    i++;        
        });    
    }
                function check() {
                    checkRequired('oops');
                    
                }
            </script>
        </head>
        <body>
            <form id="example" class="example">
                <p>
                User:  <input class="required" type="text" id="username" name="username" style="float:left;"/><div style="display:none;float:left;"id="error1"></div><br /><br />
                </p>
                <p>
                User1: <input class="required" type="text" id="username1" name="username1" style="float:left;"/><div style="display:none;float:left;"id="error2"></div><br /><br />
                </p>
                <p>
                User2: <input class="required" type="text" id="username2" name="username2" style="float:left;"/><div style="display:none;float:left;"id="error3"></div><br /><br />
                </p>
                <p>
                User3: <input class="required" type="text" id="username3" name="username3" style="float:left;"/><div style="display:none;float:left;"id="error4"></div><br /><br />
                </p>
                <input type="submit" value="Submit" />
            </form>
    
        </body>
    </html>
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  2. #2
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    help?
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code should prevent the form from submitting when validation fails. This is what Event.stop method is for.

    Code:
    function check(evt) {
    	if(!checkRequired('oops'))
    		Event.stop(evt) // stop event propagation
    }
    Hope this helps.

  4. #4
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet....that worked. Thanks stereofrog!!
    -- Joe C --
    "Do or do not. There is no try..."
    - Yoda


Bookmarks

Posting Permissions

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