www.webdeveloper.com
Results 1 to 8 of 8

Thread: Form Validation

  1. #1
    Join Date
    Mar 2011
    Posts
    5

    Form Validation

    [CODE]<script type="text/javascript">
    function focus()
    {
    document.homepage.name.focus();
    }
    function checkall()
    {
    with(document.homepage)
    {

    // Check for blank fields
    if ((name.value=="")||(password.value=="")||(name.length>20)||(password.length>20))
    {
    alert("Please complete all fields")
    alert("Fields cannot contain more than 20 characters!")
    return false;
    }

    else
    {
    alert("Welcome!");
    return true;
    }
    }
    }
    </script>

    </head>

    <body onLoad="focus()">

    <h1>Welcome to the Casino:</h1>

    <p>Enter your Username and Password below.</p>

    <form name="signin" method="post" action="login.php" onSubmit="return checkall()">

    <table border="0">

    <tr><td width="120">Username:</td><td><input type="text" name="name"></td></tr>
    <tr><td width="120">Password:</td><td><input type="password" name="password"></td></tr>

    <tr><td>&nbsp;</td></tr>
    <tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>

    </table>
    </form>[CODE]

    I want an alert to come up if the username or password box is left empty or the amount of characters entered is >20.

    When I push submit nothing happens, it just goes to the login.php without validating.

  2. #2
    Join Date
    Mar 2011
    Posts
    5
    HTML Code:
    <script type="text/javascript">
    function focus()
    {
    document.homepage.name.focus();
    }
    function checkall()
    {
    with(document.homepage)
    {
    
    // Check for blank fields
    if ((name.value=="")||(password.value=="")||(name.length>20)||(password.length>20))
    {
    alert("Please complete all fields")
    alert("Fields cannot contain more than 20 characters!")
    return false;
    }
    
    else
    {
    alert("Welcome!");
    return true;
    }
    }
    }
    </script>
    
    </head>
    
    <body onLoad="focus()">
    
    <h1>Welcome to the Casino:</h1>
    
    <p>Enter your Username and Password below.</p>
    
    <form name="signin" method="post" action="login.php" onSubmit="return checkall()">
    
    <table border="0">
    
    <tr><td width="120">Username:</td><td><input type="text" name="name"></td></tr>
    <tr><td width="120">Password:</td><td><input type="password" name="password"></td></tr>
    
    <tr><td>&nbsp;</td></tr>
    <tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>
    
    </table>
    </form>
    Reposted the code because the tags didnt work the first time.

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    "focus" and "name" are reserved JavaScript words. You might be able to get away with naming an element "name", but I recommend changing it to something like "fullName", or something like that.

    You'll have to change the name of the first function, though; function focus() won't fly, since .focus() exists.

    Keeping the number of alerts to a minimum (preferably one) would be less annoying to the users.

    Not currently seeing anything else incorrect.

    ^_^

  4. #4
    Join Date
    Mar 2011
    Posts
    5
    HTML Code:
    <script type="text/javascript">
    function getfocus()
    {
    	document.homepage.name.focus();
    }
    function checkall()
    {
    	with(document.homepage)
    	{
    		// Check for blank fields
    		if ((name.value=="")||(password.value=="")||(name.length<10)||(password.value<10))
    		{
    			alert("Please complete all fields properly")
    			return false;
    		}
    		
    		else
    		{
    			alert("Welcome!");
    			return true;
    		}
    	}
    }
    </script>
    </head>
    
    <body onLoad="focus()">
    
    	<h1>Welcome to the Casino:</h1>
    
    	<p>Enter your Username and Password below.</p>
    	<p>Username and Password must not have more than 20 characters each.</p>
    
    	<form name="homepage" method="post" action="login.php" onSubmit="return checkall()">
    
    	<table border="0">
    
    	<tr><td width="120">Username:</td><td><input type="text" name="name" maxlength="20"></td></tr>
    	<tr><td width="120">Password:</td><td><input type="password" name="password" maxlength="20"></td></tr>
    
    	<tr><td>&nbsp;</td></tr>
    	<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>
    
    	</table>
    	</form>
    When I click submit when the fields are empty I get the "Please complete all fields properly" alert, but when I enter less than 10 characters in each field I get the welcome alert.

    Cant figure out why?

  5. #5
    Join Date
    Mar 2011
    Posts
    5
    bump

  6. #6
    Join Date
    Mar 2011
    Posts
    7
    Quote Originally Posted by The_Bear View Post
    bump
    try this:

    Code:
    <script type="text/javascript">
    function getfocus()
    {
    	document.homepage.name.focus();
    }
    function checkall(form)
    {
    	var name = form.name.value;
    	var pwd = form.password.value;
    	with(document.homepage)
    	{
    		// Check for blank fields
    		if (name == "" || pwd == "" || name.length < 10 || pwd.length < 10)
    		{
    			alert("Please complete all fields properly")
    			return false;
    		}
    		
    		else
    		{
    			alert("Welcome!");
    			return true;
    		}
    	}
    }
    </script>
    </head>
    
    <body onLoad="focus()">
    
    	<h1>Welcome to the Casino:</h1>
    
    	<p>Enter your Username and Password below.</p>
    	<p>Username and Password must not have more than 20 characters each.</p>
    
    	<form name="homepage" method="post" action="login.php" onSubmit="return checkall(this)">
    
    	<table border="0">
    
    	<tr><td width="120">Username:</td><td><input type="text" name="name" maxlength="20"></td></tr>
    	<tr><td width="120">Password:</td><td><input type="password" name="password" maxlength="20"></td></tr>
    
    	<tr><td>&nbsp;</td></tr>
    	<tr><td colspan="2" align="center"><input type="Submit" name="submit" value="Submit"><input type="Reset" name="reset" value="Reset"></td></tr>
    
    	</table>
    	</form>

  7. #7
    Join Date
    Mar 2011
    Posts
    5
    That works!! Thanks so much

  8. #8
    Join Date
    Mar 2011
    Posts
    7
    your welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles