SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is wrong with this form validation

    I am struggling to get this simple form validation to work.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    
    function validate_form(formId)
    {
    	alert ("validate " + formId);
            alert ("document.myform.email.value = " + document.myform.email.value);
    	alert ("document.getElementById('email').value = " + document.getElementById("email").value);
    
     valid = true;
    
        if (document.myform.email.value == "insert email" )
        {
            alert ( "Please insert your email address" );
            valid = false;
        }
    
        return valid;
    
    
    }
    </script>
    </head>
    
    <body>
    <form  name="myform" action="testForm.html" onsubmit="return validate_form(this);" method="post">    
          
          	   <input type="hidden" name="recipient" value="contactme" />
               <input type="hidden" name="email" value="email">
               <input type="hidden" name="redirect" value="thankyou.htm">
               <input type="hidden" name="subject" value="Subscribe to Newsletter">
    
    
    
    
          
         subscribe to newsletter <a href="privacy.htm">(privacy)</a>
    
          <p>
             <input name="email" type="text" value="insert email" size="15">
           
    	<input type="submit" name="submit" value="Submit" id="submit" class="submit" />
    
          </p>
          
          
          </form> 
    </body>
    
    </html>

    It displays the first alert correctly

    The second displays a result of undefined and the third doesn't display at all.

    Any ideas what is wrong?
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The form tag needs to use id instead of name.

    The name attribute only has a useful meaning on form fields. Anywhere else and they are an antiquated way to identify anchor names, which has been long since replaced by the id attribute.

    The document.myform technique depends on the antiquated name attribute on the form element.

    An improved version of that is to place an identifier on the form, but as you're not accessing the form from outside, you need no id or name attribute on there at all. The submit event is passing a reference to the form itself. The validation function shouldn't call the argument formid, because it's not a text string. It's a reference to the form itself. That argument should instead just be form.

    The reference to document.myform.email.value won't work, because there are multiple form elements with that same name. One is a hidden field, the other is a text field. When there are multiple elements with the same name, you have to specify which one you're interested in. You cannot guarantee in which order a web brower will place those identically named elements, so in the interest of making things easier, I'll remove the hidden email field for now.

    When a form field starts with a given value, it has that starting value stored in a property called defaultValue which you can check against. This helps to prevent errors from ocurring due to updates happening in only one location.

    Here is the updated code that's more robust and harder to break

    Code html4strict:
    <html>
    <head>
    <script type="text/javascript">
    function validate_form(form) {
    	var valid = true;
    	alert ("validate " + form);
        alert ("form.email.value = " + form.email.value);
     
        if (form.email.value == form.email.defaultValue) {
            alert ( "Please insert your email address" );
            valid = false;
        }
        return valid;
    }
    </script>
    </head>
     
    <body>
    <form action="testForm.html" onsubmit="return validate_form(this);" method="post">    
    	<input type="hidden" name="recipient" value="contactme">
    	<input type="hidden" name="redirect" value="thankyou.htm">
    	<input type="hidden" name="subject" value="Subscribe to Newsletter">
     
    	subscribe to newsletter <a href="privacy.htm">(privacy)</a>
    	<p>
    		<input name="email" type="text" value="insert email" size="15">
    		<input type="submit" name="submit" value="Submit" id="submit" class="submit">
    	</p>
    </form> 
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the very detailed reply. I have never really learnt javascript (as is evidence from my posts on this forum) and have just copied bits from one site to the next over the years so that probably explains alot of the antiquated elements.

    Anyway your code works brilliantly so thank you very much. I have ordered bulletproof ajax book and dom scripting to finally get to grips with this javascript and ajax malarkey.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk


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
  •