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
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with Form Validation

    An alert box is supposed to appear when the fields are not filled in after clicking the Register button, however one does not appear.

    HTML
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Web Form</title>
            <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
            <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <div id="header"><h1>Registration Form</h1></div>
            <div id="wrapper">
                <div id="inputs">
                    <form name="input" action="#" method="post" onsumbit="return validateForm()">
                        First Name: <input type="text" name="firstname"><br/>
                	    Last Name: <input type="text" name="lastname"><br/>
                	    E-mail: <input type="email" name="email"><br/><br/>
                </div>
                <div>
                        Password: <br/><input type="password" name="password"><br/>
                        <p>Sex:</p>
                        <input type="radio" name="sex" value="male">Male
                        <input type="radio" name="sex" value="female">Female<br/>
                        Date of Birth (dd/mm/yyyy)
        				<br />
    					<input type="text" id="day" name="day">
    					<select name="month">
    						<option value="january">January</option>
    						<option value="february">February</option>
    						<option value="march">March</option>
    						<option value="april">April</option>
    						<option value="may">May</option>
    						<option value="june">June</option>
    						<option value="july">July</option>
    						<option value="august">August</option>
    						<option value="september">September</option>
    						<option value="october">October</option>
    						<option value="november">November</option>
    						<option value="december">December</option>
    					</select>
    					<input type="text" id="year" name="year">
                        <br/>
                        <br/>
                        <input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
                        <input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/> 
                        <input type="submit" value="Register">
                    </form>
                </div>
            </div>
        </body>
    </html>
    CSS
    Code:
    #header {
        position: relative;
        top: -10px;
        background-color: #424242;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        height: 40px;
    }
    
    h1 {
        font-family: Helvetica;
        color: #151515;
        text-align: center;
    }
    
    form {
        font-family: Verdana, Arial, sans-serif;
    }
    
    p {
        font-family: Verdana, Arial, sans-serif;
        display: inline-block;
    }
    
    input {
        font-family: Verdana, Arial, sans-serif;
        color: #777;
    }
    
    #wrapper {
        border-left: 1px solid #888;
        border-right: 1px solid #888;
        border-bottom: 1px solid #888;
        position: relative;
        top: -10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 20px;
        box-shadow: 3px 3px 3px #444;
        font-family: Verdana, Arial, sans-serif;
        font-size: 0.8em;
    }
    
    #inputs {
    	width: 200px;
    	clear: both;
    }
    
    #inputs input {
    	width: 100%;
    	clear: both;
    }
    
    input#day {
        width: 17px;
    	font-family: arial;
    }
    JavaScript
    Code:
    function validateForm () {
        var x=document.forms["input"]["firstname"]["lastname"]["email"]["password"]["sex"]["day"]["month"]["year"].value;
        if (x===null || x==="")
        {
            alert("Please fill out all the fields.");
            return false;
        }
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You have two </div> tags in the form - remove them
    Next your form start tag is
    Code:
    <form name="input" action="#" method="post" onsumbit="return validateForm()">
    and it should be
    Code:
    <form name="input" action="#" method="post" onsubmit="return validateForm()">
    and most important your JS is wrong.
    Code:
     var x=document.forms["input"]["firstname"]["lastname"]["email"]["password"]["sex"]["day"]["month"]["year"].value;
    ??????
    Last edited by sunfighter; 07-11-2013 at 03:10 PM.
    Evolution - The non-random survival of random variants.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    onsumbit="return validateForm()"

    See anything wrong here?

    var x=document.forms["input"]["firstname"]["lastname"]["email"]["password"]["sex"]["day"]["month"]["year"].value;

    This is bogus. You must cycle through each form field to validate it. What do you mean by "one does not appear"? Note that a form field can never be null - only "" (blank).

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
    Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    Assigning a name to a form is obsolete. Use an id instead.

    Sunfighter beat me to it!

    Quizmaster: Who was assassinated in Dallas by Lee Harvey Oswald?
    Contestant: JR
    Last edited by Philip M; 07-11-2013 at 03:14 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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    A form has to have an ID, a name is not required but ok.
    The form elements need a name, an id is ok.
    The first hair pulling I did with JS was form validation and submission, so I tried to see if i could just whip one out. Well it did take some time, but I did remember a lot of stuff.
    Here is my efforts in an attempt to help you understand forms and JS submission. If you have questions just post here:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Web Form</title> 
    <style type="text/css">
    span{                                  // This seems to be what spans are used for besides inline short styling
    	color: red;
    }
    label{
    	float:left;
    	width: 11em;                        // I have been trying to use em to style for sometime I remembered while doing this for you
    	text-align:right;
    }
    input{
    	margin-left: 1em;                   // you use em because it allows you to change the font and size without messing the styling
    	margin-bottom: .5em;
    }
    </style>
    </head>
    
    <body>
    <div id="header"><h1>Registration Form</h1></div>
    <div id="wrapper">
        <div id="inputs">
            <form name="myform" id="myform" action="#" method="post">
                <label for="firstname">First Name:</label>
    			<input type="text" name="firstname" id="firstname"><span id="firstname_error"></span><br />
    			<label for="lastname">Last Name:</label>
        	    <input type="text" name="lastname" id="lastname"><span id="lastname_error"></span><br />
    			<input type="button" value="Register" onclick="validateForm()" >
            </form>
        </div>
    </div>
    
    
    <script type="text/javascript">
    var text = "   This needs to be filled out";
    var validated = true;                       // Every time we hit the button this becomes true
    function validateForm () {
    	//This block of codee can be copy/pasted for each element in the form
    	if(ck('firstname') == ''){
    		mess('firstname', text);
    		validated = false;                  // Only turns to false if nothing in input field
    	}else{
    		mess('firstname', '');
    	}
    
    	if(ck('lastname') == ''){
    		mess('lastname', text);
    		validated = false;
    	}else{
    		mess('lastname', '');
    	}
    
    	if(validated) {
    		// javascript submits your form here if all inputs are filled in'
    		document.getElementById("myform").submit();
    	}
    }
    
    function ck(name){
    return document.getElementById(name).value;
    }
    function mess(name, txt){
    	new_name = name+'_error';
    	document.getElementById(new_name).innerHTML = txt;
    }
    </script>
    </body>
    </html>
    Last thought: Just checking for empty fields is just the start. Ex: You want to make sure the email address is an address, that number fields do not contain letters etc. When you get that far you might want to give this a look/try http://jqueryvalidation.org/documentation/
    Last edited by sunfighter; 07-11-2013 at 04:39 PM. Reason: Added link to validator
    Evolution - The non-random survival of random variants.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Same problem.

    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
    Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses.

    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
    •