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 5 of 5

Thread: form validation

  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    form validation

    just wondering why my form validation isn't working?!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Add Member</title>
            <link href="css/popup.css" rel="stylesheet" type="text/css" />
    		
    		<script type="text/javascript">
    			function validateForm()
    			{
    			var member=document.forms["members"]["member"].value
    			if (member==null || member=="")
    			  {
    			  alert("Please enter a member name!");
    			  return false;
    			  }
    			}
    		</script>
    		
    	</head>
    	<body style="margin:0px; background:none;">
    	<div class="popupheader">&nbsp;Locum 8</div>
    		<form action="add_member_script.php" name="members" method="post" onsubmit="return validateForm();">
    		<fieldset>
    		<legend>Add Member</legend>
    			<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
    				<tr>
    					<td width="124" align="right">Member Name:&nbsp;</td>
    					<td width="236"><input type="text" name="first_name" class="smallInput small" /></td>
    				</tr>
    				<tr>
    					<td width="124" align="right">Member Surname:&nbsp;</td>
    					<td width="236"><input type="text" name="second_name" class="smallInput small" /></td>
    				</tr>
    				<tr>
    					<td colspan="2" height="10"></td>
    				</tr>				
    				<tr>
    					<td>&nbsp;</td>
    					<td><a href="javascript:document.members.submit();" class="button"><span>Add Member</span></a></td>
    				</tr>
    				<tr>
    					<td colspan="2" height="10"></td>
    				</tr>
    			</table>
    		</fieldset>
    		</form>
    	</body>
    </html>

  2. #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Are you aware that with

    Code:
    if (member==null || member=="")
    if I enter @#$%^&*, the if's test condition will evaluate to false and so @#$%^&* will be accepted as a valid name?

    Also, which element in your html does document.forms["members"]["member"] belong to?

    The IE or FF error console will show you what your errors are.
    Last edited by bullant; May 25th, 2011 at 02:13 PM.

  3. #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,551
    Thanks
    221
    Thanked 2,712 Times in 2,686 Posts
    It is not a good idea to use the same name - member- for an HTML element and a Javascript variable.

    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.

  4. #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok cool thanks, so what would you suggest?

  5. #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,551
    Thanks
    221
    Thanked 2,712 Times in 2,686 Posts
    Form validation has been covered a zillion times in this forum.

    You have two fields for first_name and second_name. There is in fact no field named member.

    Code:
    function validateForm()	{
    var memb = document.forms["members"]["first_name"].value;
    memb = memb.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
    memb = memb.replace(/\s{2,}/g," ");  // replace multiple spaces with one space
    memb = memb.replace(/[^a-z\s-\']/gi, ""); // strip all but letters space hyphen apostrophe
    memb = memb.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});  // format
    document.forms["members"]["first_name"].value = memb;  // write it back to the field
    memb1 = memb.replace(/[^a-z]/gi, "");
    if (memb1.length < 2) {  // at least two letters
    alert("Please enter a first name!");
    document.forms["members"]["first_name"].value = "";  // clear the field
    setTimeout('document.forms["members"]["first_name"].focus()', 25);  // and refocus on it
    return false;
    }
    }
    
    
    // repeat above for second_name field
    
    }
    Last edited by Philip M; May 27th, 2011 at 05:06 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.


 

Posting Permissions

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