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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding Validation on blur

    Hi I am using a simple contact form from css tricks but I'd like to add validation on blur so someone is warned if they do not add a valid email or telephone number or if they do not leave a name.

    Do I need to change the PHP file as well as the HTML? If anyone could direct me to a tutorial that shows how to add this to an already existing contact form that'd be great. I'd rather keep the form as I have it and not start from scratch if possible.

    Any advice would be much appreciated.

    Thanks in advance,

    DC

  • #2
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    How about something like this:

    Code:
    <html>
    <head>
      <title>form test</title>
    
      <script type="text/javascript">
    
        function validate_email(email) {
          var re = /.+@.+\..+/;
          if(!re.test(email.value)) {
            document.getElementById("email_error").innerHTML = "Invalid email";
          }
          else {
            document.getElementById("email_error").innerHTML = "OK";
          }
          
        }
    
      </script>
    
    </head>
    
    <body>
    
      <table>
        <tr>
          <td>Email</td><td><input type="text" id="email" onblur="validate_email(this);"/></td><td><span id="email_error"></span></td>
        </tr>
      </table>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your speedy reply but I'm afraid that didn't work (or I didn't do it right!). I'm not using tables but I'd imagine that shouldn't be a problem.

    I edited my code to look like below and added the script under my google analytics script:

    Code:
     <form method="post" action="contactengine.php">
    			  <label for="Name">Name:</label>
    				<input name="name" type="text" id="name" onblur="MM_validateForm('name','','R','telephone','','NisNum','email','','NisEmail');return document.MM_returnValue" />
    				
    				<label for="Telephone">Telephone:</label>
    				<input type="tel" name="Telephone" id="Telephone" />
    	
    				<label for="Email">Email:</label>
    				<input type="text" id="email" onblur="validate_email(this);"/>
    				
    				<label for="Message">Message:</label><br />
    				  <textarea name="message" cols="40" rows="4" id="message" onblur="MM_validateForm('name','','R','telephone','','NisNum','email','','NisEmail');return document.MM_returnValue"></textarea>
    
    			  <input type="submit" name="submit" value="Submit" class="submit-button" />
    			</form>
    I must have forgotten something.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by daraclare View Post
    Do I need to change the PHP file as well as the HTML? If anyone could direct me to a tutorial that shows how to add this to an already existing contact form that'd be great. I'd rather keep the form as I have it and not start from scratch if possible.
    You definitely need to do this on the server side (i. e. in the PHP) before thinking about client side (i. e. JavaScript) validation. And itís not so much about the HTML, except adding and formatting the text of the error message, itís really a PHP issue. Iím sure there are some nice people here that are willing to complete this task for you. Iím gonna move it to the PHP forum.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks.

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone help on this issue at all? Or direct me to a tutorial about this subject maybe?

    thanks again


  •  

    Posting Permissions

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