Validation with Prototype.js

**ChestRockwell** · May 24, 2007 07:21

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>

**ChestRockwell** · May 24, 2007 08:25

help?

**stereofrog** · May 24, 2007 09:03

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.

**ChestRockwell** · May 24, 2007 10:45

sweet....that worked. Thanks stereofrog!!

User Tag List

Thread: Validation with Prototype.js

Thread Tools

Display

Validation with Prototype.js

Bookmarks

Bookmarks

Posting Permissions