SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Form checking

  1. #1
    SitePoint Enthusiast Ninth Dimension's Avatar
    Join Date
    Sep 2002
    Location
    London, England.
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form checking

    Hi all.

    I'm building a site that requires user registration, I've already built myself a PHP based user registrationg system, and it already has all the usual checks that are required before letting someone sign up (i.e. that the username is unique, that all required fields are filled, that the two passwords match, that the email address is valid, etc..) using PHP, and so I could ship the system as it is.. but.. I wanted to add some JavaScript checks to it aswell (just to be sure, and to save processor power, etc.. you know how it is).

    Below is the html template that I'm currently using to display the registration form:

    HTML Code:
    <div class="conttitle">Register</div>
        
        <div class="conttext">Please submit the following information to register for this site.</div>
        
        <table align="center" cellpadding="4" cellspacing="0">
        <form method="post" action="register.php"><tr>
        <td width="50%"><div class="text"><b><big>Username:</big></b></div></td>
     <td width="50%"><div class="text"><input type="text" name="register_username" size="30" maxlength="20" value="<?=$_GET['register_username'];?>" /> *</div></td>
        </tr><tr>
        <td width="50%"><div class="text"><b><big>Email Address:</big></b></div></td>
     <td width="50%"><div class="text"><input type="text" name="register_email" size="30" maxlength="50" value="<?=$_GET['register_email'];?>" /> *</div></td>
        </tr><tr>
        <td width="50%"><div class="text"><b><big>Password:</big></b></div></td>
     <td width="50%"><div class="text"><input type="password" name="register_password" size="30" maxlength="20" /> *</div></td>
        </tr><tr>
     <td width="50%"><div class="text"><b><big>Password Again:</big></b></div></td>
     <td width="50%"><div class="text"><input type="password" name="register_password_again" size="30" maxlength="20" /> *</div></td>
        </tr><tr>
     <td width="100%" colspan="2" align="center"><div class="text"><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></div></td>
        </tr><tr>
     <td width="100%" colspan="2" align="center"><div class="text">(Fields marked with a * are required.)</div></td>
     </tr><input type="hidden" name="register_conditions" value="agree" /><input type="hidden" name="register_submit" value="1" />
        </form>
        </table>
    I'm basicly after one of two things - either for one of you great people here to add some JavaScript checking to it (i.e. that all the required fields are filled, that the email address is of a valid format, and that both the passwords match) and to display an alert box if any of the info is incorrect - or - to point me in the direction of an easy to use tutorial that will teach me how to do it..

    I know very little about JavaScript and other client-side languages (most of my knowledge is in server side stuff like PHP and MySQL) so please feel free to treat me as if I'm an idiot when explaining stuff, because it's highly possable that I won't understand it any other way Oh, and please try and make it cross browser too

    Thank you

    (PS, the checking I'm doing in PHP for the email address is below - I don't know if the same rules set can be used for the email address checking or not, but if it can, it might be a good idea so that the JS doesn't accept it, but then have the PHP reject it for whatever reason
    PHP Code:
    if (!ereg("(^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,4})$)"$_POST['register_email'])) {
            
    /* invalid email address, show error */
        


  2. #2
    SitePoint Enthusiast Ninth Dimension's Avatar
    Join Date
    Sep 2002
    Location
    London, England.
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just found this: http://www.sitepoint.com/article/for...on-client-side and I'm going to have a read of it now - but I don't think it covers all that I need (such as the email checking)... so please feel free to offer to do the form checking for me

    UPDATE: I've just read the article - and it's like a foregn language to me - I guess it's assuing that I have JS knowledge - which I do not, so it's not much help to me

  3. #3
    SitePoint Enthusiast Ninth Dimension's Avatar
    Join Date
    Sep 2002
    Location
    London, England.
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I've had a good friend of mine put some JS togther for me, as below (inserted between the <head> tags):
    HTML Code:
    <script language="Javascript" type="text/javascript">
     <!-- // hide this script
     function checkMyForm() {
     	if (myForm.register_username.value == "") {
     		alert("Please enter a username.");
     		myForm.register_username.focus();
     		return false;
     	}
     	if (myForm.register_email.value.length < 6) {
     		alert("You must provide a longer email address.");
     		myForm.register_email.focus();
     		return false;
     	}
     	atSign = myForm.register_email.value.indexOf("@", 1);
     	if(atSign == -1) {
     		alert("You must have an @ in your e-mail.");
     		myForm.register_email.focus();
     		return false;
     	}
     	period = myForm.register_email.value.indexOf(".", atSign);
     	if(period == -1) {
     		alert("You must have an . in your e-mail.");
     		myForm.register_email.focus();
     		return false;
     	}
     	invalidCharString =",;!/\:><#$%&*";
     	count = 1;
     	while (count <=invalidCharString.length) {
     		invalid = invalidCharString.charAt(count-1);
     		if (myForm.register_email.value.indexOf("invalid", 0) != -1) {
     			alert("You have an invalid character in your e-mail.");
     			myForm.register_email.focus();
     			return false;
     		}
     		count++;
     	}
     	if (myForm.register_password.value == "") {
     			alert("Please enter your Password");
     			myForm.register_password.focus();
     			return false;
     	}
     	if (myForm.register_password_again.value == "") {
     			alert("Please enter your Password again");
     			myForm.register_password_again.focus();
     			return false;
     	}
     	if (myForm.register_password_again.value != myForm.register_password.value) {
     			alert("Please enter matching passwords");
     			myForm.register_password.focus();
     			return false;
     	}
     }
     //-->
     </script>
    she's also change the <form> tag as such:
    HTML Code:
    <form name="myForm" onsubmit="return checkMyForm()" action="register.php">
    Problem, it doesn't work, well, that's a lie, it's working fine in IE, but it's not doing anything in firefox (I think it's because the command to make it start isn't working correctly).. can someone look into it for me please?
    Last edited by Ninth Dimension; Apr 2, 2005 at 19:58.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The object references are relying on the way that IE automatically adds all elements that have a name or id to the global vars.

    Your friend apparently doesn't understand regular expressions or cross-browser JavaScript.

    The easiest way to make that work in Firefox would be to change every occurrence of 'myForm.' in that script to 'document.myForm.'
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Enthusiast Ninth Dimension's Avatar
    Join Date
    Sep 2002
    Location
    London, England.
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, that's working great


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
  •