SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Form validation

  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Form validation

    Before anyone shouts at me, I've used the search function, and exhaustively looked through references on SP, w3schools and many others on the net this morning. I ordinarily shy away from JS completely, and use .php validation exclusively, but for a new form I'm working on I'm looking for perfection, so am aiming for client side validation and .php validation - making things speedier (and less server intensive) for those with js on, and still functional for those without it.

    All previous js I have used has been hacked script from elsewhere - I really should get up to speed, but in between improving my .php, learning to administer a linux box, xml schema, accessibility issues and continuing .css improvement, js has been at the bottom of the pile!

    What I am looking to do is rather simple I'm sure. I want to ensure required fields are filled in. And I want to do it to standards, using the DOM properly. I'm also willing to do some .php browser sniffing so that known browsers that can't work to standards are simply not given the script.

    The validation should appear as a single alert on form submission, I am not convinced by Martin Tsachev's article that opines making a user continually resubmit (because they are too stupid handle being presented with everything that is wrong) is a good idea (it really annoys most people I have asked), and I am concerned about the use of non-standard code in Kennet Svanberg's tutorial.

    Can anyone point to some good resources or help out? I'm tearing my hair out here!
    Last edited by TheOriginalH; Mar 13, 2003 at 06:53.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I have a form validation script that many people use and love called fValidate. It's highly comprehensive and pretty compatible, but it's still beta and there are a few bugs that persist in a couple places.

    However, I'm currently rewriting the code from the ground up using OOP javascript (as much as it will allow) and DOM methods for various types of errors. This new rewrite will be more compatible, more modular, more flexible, all without sacrificing the extreme ease of use that has made it one of the most popular JS form validation tools out there in less than a year.

    The current version of fValidate allows you to 'group error' with the change of a single parameter. You can even have it switch from 'group error' mode to 'error by error' mode after a specified number of failures.

    It think you'll find it pretty easy to use, but depending on how soon you need it, you may really want to wait for my next major release, approx 2-3 weeks. It will be much better.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Heh - I actually found that script and it was the only "ready rolled" one I was considering using - and the author's on SP . It actually does too much for me though. I only want to ensure certain fields are filled in. I may have to give it a go in current incarnation as this is due to go live tomorrow..
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Your concern is one that I'm addressing with the next version. When I say more modular, I mean that the validation types will be grouped into several different files, so you can add validator types to your page as you need them. (there will be a master as well, that contains all)

    Alas, you can always just open up fValidate.js and remove all the validator functions you won't need.

    You may need to change the regular expression in the 'blank' validator from

    /\S/

    to

    /^\s*$/

    For it to work in IE 5.0. I added a sniffer a while ago to help with this problem, but I'm not sure it's 100% reliable, as I still get a few emails about people having problems with it.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Beetle. While I'd love to learn a more "slimline" method for doing this, and stay standards compliant, I a pushed for time - trying to implement your method....

    However, the instructions on your site aren't working in Either Opera 7 or my verision of Moz?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  6. #6
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nm - viewed source - simplest solution
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  7. #7
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Ach! snot gonna work.

    I need to do ensure that each field is neither blank or its default value (added as per wai guidelines).

    I'd like to do this for every field, and upon submit have an alert appear with all missing fields.

    I can find plenty of code to help me do this, but I need guru advice to ensure it is standards and DOM compliant....
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  8. #8
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <HTML>
    <HEAD>
    <Script language="JavaScript">
    function checkForm()
    {
    var InvalidData = "";
    if (document.form1.name.value == "" ) {
    InvalidData += "\n -Name-";
    }
    if ((document.form1.email.value == "" ) || 
    (document.form1.email.value.indexOf('@') == -1) || 
    (document.form1.email.value.indexOf('.') == -1))
    {
    InvalidData += "\n -Email address-";
    }
    if(document.form1.message.value == "" )
    {
    InvalidData += "\n -Message-";
    }
    if (InvalidData != "" )
    {
    InvalidData = "The following field(s) have been filled incorrectly:\n" + InvalidData;
    alert(InvalidData);
    return false;
    }
    }
    </script>
    </HEAD>
    <BODY>
    <form name="form1" method="POST" action="mailto:email@address.com?subject=Form from my website" onSubmit="return checkForm()">
    <br>
    Name: 
    <input type="text" name="name">
    <br>
    Email: 
    <input type="text" name="email">
    <br>
    <br>
    Message: <br>
    <textarea rows="4" cols="35" name="message"></textarea>
    <br><br>
    <input type="submit" name="submit" value="Submit form">
    </form>
    </BODY>
    </HTML>
    There you go...checks to make sure the name field isn't blank, that the email form isn't blank and has an @ character and a period character, and makes sure the message field isn't blank...pretty simple script, and it displays an alert with the error message very nicely. Give it a try, if you have any problems with my script, let me know. :)

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go, this checks only text-type inputs and textareas
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<title>Validation test</title>
    	<script type="text/javascript">
    		function validateForm( f )
    		{
    			var errors = new Array();
    			var count = 0;
     
    			for ( var elem, i = 0; ( elem = f.elements[i] ); i++ )
    			{
    				if ( elem.type == 'text' || elem.nodeName == 'TEXTAREA' )
    				{
    					if ( elem.value == elem.defaultValue || /^\s*$/.test( elem.value ) )
    					{
    						errors[count++] = " -" + elem.name;
    					}
    				}
    			}
     
    			if ( count != 0 )
    			{
    				alert( "The following fields are blank or remain unchanged.\nPlease fill in the appropriate data\n\n" + errors.join( "\n" ) );
    				return false;
    			}
     
    			return true;
    		}
    	</script>
    </head>
    <body>
    	<form id="myForm" onsubmit="return validateForm( this )">
    		blah <input type="text" name="blah" value="Name" />
    		<br />
    		blah2 <input type="text" name="blah2" value="Name2" />
    		<br />
    		blah3 <input type="text" name="blah3" value="Name3" />
    		<br />
    		blah4 <input type="text" name="blah4" value="Name4" />
    		<br />
    		blah5 <textarea name="blah5">enter something</textarea>
    		<input type="submit" name="Submit" value="Submit" />
    	</form>
    </body>
    </html>
    DOM compliant and all that good stuff
    Last edited by beetle; Mar 14, 2003 at 11:18.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Guys, you are great.

    My next learning curve is gonna have to be JavaScript and the DOM. I suppose if I can offer the best of both worlds without compromising usabilty, I should....
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


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
  •