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

    Form Validation works beautifully in IE but not in FF or Chrome?

    Hi,

    I have used the JavaScript from www.tizag.com for form validation.

    The javascript 'should validate my form for empty fields of 'name' and 'message', and for a valid email address.

    This works perfectly in IE, but in FireFox and Chrome (and mostly likely all other decent browsers), the validation does not work as required...

    For example, in FireFox, when I click to submit my form without any fields input, I receive the error 'Please enter a name.' which is great! But then when i do enter a name, the form decides to send, when instead it should validate the next field that is empty! (and this works in IE7!!!)

    Anyway here is my JavaScript code:

    Code:
    <script type='text/javascript'>
    
    function formValidator(){
    	// Make quick references to our fields
    	var name = document.getElementById('name');
    	var message = document.getElementById('message');
    	var email = document.getElementById('email');
    	
    	// Check each input in the order that it appears in the form!
    	if(isAlphabet(name, "Please enter your name.")){
    		if(isAlphanumeric(message, "Please enter a message.")){
    						if(emailValidator(email, "Please enter a valid email address")){
    							return true;
    						}
    					}
    				
    			
    		
    	}
    	
    	
    	return false;
    	
    }
    
    function notEmpty(elem, helperMsg){
    	if(elem.value.length == 0){
    		alert(helperMsg);
    		elem.focus(); // set the focus to this input
    		return false;
    	}
    	return true;
    }
    
    function isNumeric(elem, helperMsg){
    	var numericExpression = /^[0-9]+$/;
    	if(elem.value.match(numericExpression)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function isAlphabet(elem, helperMsg){
    	var alphaExp = /^[a-zA-Z]+$/;
    	if(elem.value.match(alphaExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function isAlphanumeric(elem, helperMsg){
    	var alphaExp = /^[0-9a-zA-Z]+$/;
    	if(elem.value.match(alphaExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    
    
    
    function emailValidator(elem, helperMsg){
    	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    	if(elem.value.match(emailExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    </script>
    and my html for my form is simply this:

    Code:
    <form method="post" id="form" onsubmit="return formValidator()" action="mail/sendmailcontact.php">
    <p> </p>
    
    <label>Name:</label> <input name="name" id="name" size="40" type="text" /> <br /> 
    
    <label>Email Address:</label> <input name="email" id="email" size="40" type="text" /> <br /> 
    
    <label>Your Interest:</label><select name="regarding" id="regarding"> <option value="building" selected="selected">building</option> <option value="maintenance">maintenance</option> <option value="landscaping">landscaping</option> <option value="exterior design">exterior design</option> <option value="Other">Other</option> </select> <br /> 
    
    <label>Message:</label> <textarea name="message" rows="8" cols="8"></textarea> <br /> 
    
    <label>How did you find Velivo?</label> <select name="foundby" id="foundby"> <option value="Word of Mouth">Word of Mouth</option> <option value="Search Engine" selected="selected">Search Engine</option> <option value="Online Advertisment">Online Advertisment</option> <option value="Newspaper">Newspaper</option> <option value="Leaflet">Brochure</option> </select> <br /> 
    
    <input name="submit" class="btn" size="30" value="Send Message" type="submit" /> </form>
    I have spent over 4 hours trying to work out why it only works perfectly in IE7! Please help me on this, I would much appreciate it!

    Thank you.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    So what do you see if you run the script via FireBug in FF??

    Seems a clumsy way to do validation, by the by.

    I know, not your fault, since you cloned the code, but...

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am a beginner, trying to learn. I was just looking for a way to be able to validate the fields in my form.

    The bug I get when the script is run with FireBug is; 'elem is null' on line 156 which points to here:

    Code:
    if(elem.value.match(alphaExp)){

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    HAH! Obvious when you debug!

    After doing
    Code:
    var message = document.getElementById('message');
    you find that the variable message is *NULL*!

    And why is that?

    Because of this:
    Code:
    <textarea name="message" rows="8" cols="8"></textarea>
    You see any ID on that field??? No??? Me neither.

    MSIE will use the name of a form field as its ID if an ID is not specified. That's not what all good browsers do.

  • Users who have thanked Old Pedant for this post:

    scank (05-27-2009)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    *DO* get Firebug and learn to debug in Firefox. It will save you HOURS AND HOURS of time.

    Back in a moment with an improvement on that code.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I cannot believe I did not spot that!!!!!! I feel like an idiot, and I even knew about the fact that IE uses the name as its ID....

    Thank you so much for the help, and rapid responses!

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, well I will check back tomorrow morning, as I live in UK its 1am! Thanks again.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    Here's my simplified version of all that.

    Got rid of all the unneeded ID='s. If you use the form as a referrent, you don't need ID's. Got rid of all the VALUE= in your <OPTION>s. When the VALUE= is the same as the text, you don't need it. (HTML will send the text to your PHP page when there is no VALUE= present...an HTML feature, nothing to do with PHP, per se.) Got rid of your <label>s. If you had a style for them, put them back in. But if you don't have a style and you don't use <label for="[id of some field]"> then they aren't doing anything useful.

    Note the use of this in the call to the validator.
    Code:
    <script type='text/javascript'>
    
    var reName    = /^[a-z]+(\s?[a-z]+)+$/i;
    var reMessage = /^.{10,999}$/
    var reNoCode  = /[\<\>\[\]]/;
    var reEmail   = /^[\w\-\.\']+\@([\w\-\']+\.)+[a-zA-z]{2,6}$/;
    
    function formValidator(form)
    {
        return reTest( form.name, reName, true, "Please enter your name, letters and space only" ) 
            && reTest( form.message, reMessage, true, "Please enter a message of at least 10 characters" )
            && reTest( form.message, reNoCode, false, "Please do not use < or > or [ or ] in your message" )
            && reTest( form.email, reEmail, true, "Please enter a valid email address" );
    }
    
    function reTest( fld, re, testFor, oops )
    {
        if ( re.test(fld.value) == testFor ) return true;
        alert( oops );
        fld.focus( );
        return false;
    }
    </script>
    <form method="post" id="form" onsubmit="return formValidator(this)" action="mail/sendmailcontact.php">
    <p> </p>
    Name: <input name="name" size="40" type="text" /> <br /> 
    Email Address: <input name="email" size="40" type="text" /><br /> 
    Your Interest: <select name="regarding"> 
        <option>building</option>     
        <option>maintenance</option>
        <option>landscaping</option>
        <option>exterior design</option>
        <option>Other</option>
        </select> <br /> 
    Message: <textarea name="message" rows="8" cols="8"></textarea> <br /> 
    How did you find Velivo? <select name="foundby"> 
        <option>Word of Mouth</option>
        <option selected>Search Engine</option> 
        <option>Online Advertisment</option>
        <option>Newspaper</option>
        <option value="leaflet">Brochure</option>
        </select> <br /> 
    <input name="submit" class="btn" size="30" value="Send Message" type="submit" /> 
    </form>

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, this is great. However, I have come across a problem with my javascript code that I used orginally (as this is what I am still using).

    In name field, if i enter 'john smith' i get prompted with the error message; 'please enter a name'...

    I I enter 'john' it works fine and accepts the value. This also happens in my message text area. I cant fill in a field containing spaces!!!

    So basically my name and message fields do not work if you enter spaces between words. How do I fix this?
    Last edited by scank; 06-04-2009 at 11:02 PM.


  •  

    Posting Permissions

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