SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with js form validation

    Sorry for submitting such a simple query, but I'm not too hot on javascript!

    I want to validate a form so that if there is an error, an error message will appear in another input field. I've used the following code, but it doesn't work so there's clearly something wrong:

    Code:
     if (theForm.surname1.value == "")
      {
        document.write.surname1error("Please enter a value");
        theForm.surname1.focus();
        return (false);
      }
      return (true);
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    if (theForm.surname1.value == "" )
      {
        theForm.surname1error.value = "Please enter a value";
        theForm.surname1.focus();
        return false;
      }
      return true;
    That's assuming the 'error field' has name="surname1error", and that 'theForm' is a valid reference to the Form object. Strictly speaking, this isn't the best way to get your user's attention.

    The document.write() function is a very generalized way to output HTML dynamically; you don't use it after the page is loaded.
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, adios.

    Quote Originally Posted by adios
    Strictly speaking, this isn't the best way to get your user's attention.
    Maybe it's just me but I hate alert boxes! The form in question is short, and I think this looks a bit more professional, although I do agree that it's probably not the best way.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah, we hate 'em too. Who wants to be 'alerted'?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var req_fields = ['firstname1' , 'middlename1' , 'surname1'];
    
    function checkform(oForm)
    {
    	for (var field, bad = 0, f = 0; f < req_fields.length; ++f)
    	{
    		field = oForm.elements[req_fields[f]];
    		if (field.value == field.defaultValue || /^\s*$/.test(field.value))
    		{
    			field.value = field.defaultValue;
    			field.style.border = '2px #f00 dashed';
    			bad = 1;
    		}
    	}
    	if (bad)
    		return false;
    	else return true;
    }
    
    function restore(oText)
    {
    	oText.style.border = '2px #000 solid';
    }
    
    function restoreAll(oForm)
    {
    	for (var field, f = 0; f < req_fields.length; ++f)
    	{
    		field = oForm.elements[req_fields[f]];
    		restore(field);
    	}
    }
    
    </script>
    </head>
    <body style="margin:100px;">
    <form name="theForm" action="javascript&#58;alert('ok')" onsubmit="return checkform(this)" onreset="restoreAll(this)">
    <input id="firstname1" name="firstname1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
    value="Please enter a value here." 
    onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
    onkeypress="restore(this)">___first name<br />
    <input id="middlename1" name="middlename1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
    value="Please enter a value here." 
    onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
    onkeypress="restore(this)">___middle name<br />
    <input id="surname1" name="surname1" type="text" style="width:156px;padding:2px;border:2px #000 solid;" 
    value="Please enter a value here." 
    onclick="if(this.value==this.defaultValue)this.value='';restore(this)" 
    onkeypress="restore(this)">___last name<br /><br />
    <input type="submit" value="submit">
    <input type="reset" onclick="return confirm('Clear all entries?')">
    </form>
    </body>
    </html>
    Last edited by adios; Nov 4, 2003 at 12:06.
    ::: certified wild guess :::

  5. #5
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, now that's much better. I'm not sure that I completely understand the code, though. Would I need to repeat this bit for each of the fields to be validated?:
    Quote Originally Posted by adios
    Code:
    
    function checkform(oForm)
    {
    	var field = oForm.surname1;
    	if (field.value == field.defaultValue || /^\s*$/.test(field.value))
    	{
    		field.value = field.defaultValue;
    		field.style.border = '2px #f00 dashed';
    		field.focus();
    		field.select();
    		return false;
    	}
    	return true;
    }
    
    function restore(oText)
    {
    	oText.style.border = '2px #000 solid';
    }
    And, in the the <form> tag, how would I repeat the onreset="restore(surname1)" for each field?
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure that I completely understand the code either.

    Nevertheless...edited the above. Alert!
    ::: certified wild guess :::

  7. #7
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    I'm not sure that I completely understand the code either.
    I admire your honesty

    Thanks for that, adios - most helpful.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you hate alert boxes, try fValidate. It has over two dozen error-notification choices.

    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •