Web Analytics Made Easy -
StatCounter Javascript Email Form Verification not working in Firefox - CodingForum

Announcement

Collapse
No announcement yet.

Javascript Email Form Verification not working in Firefox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript Email Form Verification not working in Firefox

    Hello -

    I'm a front-end designer trying to get a javascript email verification script (highlighted below in blue) to work properly in IE7, Safari and Firefox.

    In my html layout (posted below) I have a call to the javascript. The form works in IE7 and Safari but fails to perform form verification in Firefox.

    A weird note, the form verification works if I place the javascript call before the DOCTYPE declaration in the html.

    Your help is greatly appreciated.

    Thanks!
    Noah


    ---------

    Here is my html code:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>IntelliFlowRx™</title>
    
    <link rel="stylesheet" href="css/intelliflow.css" type="text/css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    [COLOR="RoyalBlue"]<script type="text/javascript" src="js/verifyForm.js"></script>[/COLOR]
    
    
    <!--#include file="info_form.asp" -->
    
    </head>
    
    <body>
    
    <form class="" name="frmMain" action="info_form.asp" method="post">
                            <input name="txtFName" type="text" value="First Name" class="formBox1" />
                            <input name="txtLName" type="text" value="Last Name" class="formBox2" /><br />
                            <input  name="txtJobTitle" type="text" value="Title" class="formBox1" />
                            <input name="txtFacility" type="text" value="Facility" class="formBox2" /><br />
                            <input name="txtPhone" type="text" value="Phone Number" class="formBox1" />
                            <input name="txtEmail" type="text" value="Email Address" class="formBox2" /><br />
                            <textarea name="txtComments" class="formBoxComments" cols="47" rows="6">Additional Comments</textarea><br />                
                            <input type="submit" value="Submit" class="submit" onclick="return formValidate();"/>
                            <input type="reset" value="Reset" class="reset"  onclick="resetError();" />
                            <span class="errorMsg"id="errMsg"></span><br />
                        </form>

    And my javascript code contained in the verifyForm.js file:

    Code:
    // JavaScript Document
    
    
    <!--
    	function formValidate(){
    		resetError();
    		//Name is blank
    		if(frmMain.txtFName.value == 'First Name' || document.frmMain.txtFName.value.length == 0){
    			displayError('Please give your First Name');
    			frmMain.txtFName.focus();
    			return false;
    		}
    		if(frmMain.txtLName.value == 'Last Name' || document.frmMain.txtLName.value.length == 0){
    			displayError('Please give your Last Name');
    			frmMain.txtLName.focus();
    			return false;
    		}
    		if(frmMain.txtJobTitle.value == 'Title' || document.frmMain.txtJobTitle.value.length == 0){
    			displayError('Please give your Title');
    			frmMain.txtJobTitle.focus();
    			return false;
    			
    		}
    		if(frmMain.txtFacility.value == 'Facility' || document.frmMain.txtFacility.value.length == 0){
    			displayError('Please give your Facility Name');
    			frmMain.txtFacility.focus();
    			return false;
    			
    		}
    		if(frmMain.txtPhone.value == 'Phone Number' || document.frmMain.txtPhone.value.length == 0){
    			displayError('Please give your Phone Number');
    			frmMain.txtPhone.focus();
    			return false;
    			
    		}
    		if(frmMain.txtEmail.value == 'Email Address' || document.frmMain.txtEmail.value.length == 0){
    			displayError('Please give your Email Address');
    			frmMain.txtEmail.focus();
    			return false;
    		}
    		}
    		
    		function resetError(){
    			document.getElementById('errMsg').innerHTML = '';
    		}
    		
    		function displayError(sError){
    			document.getElementById('errMsg').innerHTML = sError;
    		}
    -->

  • #2
    I don't know why it does not work in Firefox, (as I understand you the script is not called at all) - is it anything to do with the long-obsolete <!-- and --> comment tags?

    But may I respectfully make the point that verification of the form document.frmMain.txtFName.value.length == 0 is hardly worthy of the name and is virtually useless, as even a single space or a ? will return false, that is pass the validation.



    Quizmaster: Whch fictional character was also called Lord Greystoke?
    Contestant: Lawrence of Arabia.
    Last edited by Philip M; Apr 16, 2009, 04:22 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Hi Philip -

      Thank you for taking a look at the code. As previously mentioned I'm primarily a front-end css designer/developer and am out of my element with javascript. This script was written by another developer for an old site and I attempted to repurpose it.

      I may just scrap this code and try to write some new. Do you happen to have any suggestions of sites I could hit up for code?

      Thanks!

      Comment


      • #4
        Originally posted by menacingpanda View Post
        I may just scrap this code and try to write some new. Do you happen to have any suggestions of sites I could hit up for code?

        Form validation has been covered a zillion times in this forum, and elsewhere. Try using the search feature and you will surely find many examples.

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          Thank you for your help Philip. It's greatly appreciated!

          Comment


          • #6
            A weird note, the form verification works if I place the javascript call before the DOCTYPE declaration in the html.
            Are you sure that your markup is valid? If not, validate it and fix the errors.
            Get a copy of firebug for your firefox (if you don't have it now), which will assist you a lot.
            Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

            Comment

            Working...
            X