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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Simple form Validation Problem

    hello all,

    I'm having a problem validating a pretty straight forward form, but i can't seem to figure it out:

    The form should be checking to make sure that a visitor has entered their name, check to make sure the name entered is at least two digits, and then check to see if they have entered either the phone number or email address they can be reached at.

    As of right now, it is validating the name input, but as long as the checkName() returns true, it's acting as if it skips over the checkPhoneEmail() function...

    What am i missing?
    Code:
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    //name function is working
    function checkName() {
    	if (document.form.VisitorName.value=="") {
    		alert("you must provide your name");
    		return false;
    	}
    	if (document.form.VisitorName.value.length < 2) {
    		alert("please enter your real name");
    		return false;
    	}
    	return true;
    }
    function checkPhoneEmail() {
    	if ((document.form.VisitorEmail.value=="" || document.form.VisitorEmail.value==null) && (document.form.VisitorPhone.value=="" || document.form.VisitorPhone.value==null)) {
    		alert("You must fill in  Phone or Email");
    		return false;
    	}
    	return true;
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <form name="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="return checkName(); return checkPhoneEmail();">
    <label>Name: <input type="text" name="VisitorName" id="VisitorName" /><br /></label>
    <label>Phone: <input type="text" name="VisitorPhone" id="VisitorPhone" /><br /></label>
    <label>Email: <input type="text" name="VisitorEmail" id="VisitorEmail" /><br /></label>
    <input type="submit" value="GO!" />
    </form>
    </body>
    </html>
    I sure do appreciate any help or insight!!

    THanks,
    J

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    Chicago
    Posts
    134
    Thanks
    2
    Thanked 9 Times in 9 Posts
    I'm almost positive that the "onSubmit()" call of the FORM tag can only run a single JS call. (It will grab the first returned True value and run with it, i think...)

    Thus, write a wrapper function which executes both of your methods, then returns T/F:

    Code:
    function wrapper() {
    
    if (checkName() && checkPhoneEmail()) {
      return true;
    }
    else { return false; }
    
    }
    ...
    
    onsubmit="wrapper();"
    ...
    Last edited by arthurakay; 06-03-2009 at 10:47 PM. Reason: added bit about first True value

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Anything you assign to an html event handler gets put inside a function wrapper, so it can be called like any other routine when the event for which it's named is fired on its element. See any problem here?

    Code:
    Form.onsubmit = function() 
              {
                  return checkName(); 
                  return checkPhoneEmail();
              }
    Pretty much eliminates any chance of 'checkPhoneEmail' being invoked. As suggested, bundle the call; a number of ways to do this.

    <form .. onsubmit="return (checkName() && checkPhoneEmail())">

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Instead of writing your own I found a handy script which can be setup to validate any form input field. I would suggest using it:

    http://www.jshelpbox.com/viewtopic.php?f=4&t=9

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    function checkName() {
    if (document.form.VisitorName.value=="") {


    "Validation" like this is barely worthy of the name, as even a single space or a ? will return false (i.e. pass the validation). There are many threads in this forum where more effective validations are shown. Example:-

    Code:
    function checkName() {
    var n = document.form.VisitorName.value;
    n = n.replace(/^\s+|\s+$/g,"");   // strip leading and trailing spaces
    n = n.replace(/[^a-z\-\'\s]/gi,"");  // strip anything but a-z hyphen apostrophe space Mary-Lou O'Reilly
    if (n.length > 2) {  // minimum 2 characters in name
    alert ("You must provide your name");
    document.form.VisitorName.value = "";  // clear the field
    document.form.VisitorName.focus();  // and refocus on it
    return false;
    }
    }


  •  

    Posting Permissions

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