www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with my Form Valadation Please

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Help with my Form Valadation Please

    Hi, I'm new to JavaScript and while doing college work i have to create a form with validation, so far the Validation works but when click on the Submit key after all the correct information has been inputted the form does not go to *Untitled-2.html* and i can't seem to find out why please help me. I hope its not a completely silly reason why its not working but the help will be very much appreciated

    Code is:

    Code:
    <title>Untitled Document</title>
    
    <style type="text/css">
    <!--
    -->
    </style>
    <link href="Main Sheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
    <!--
    function resizeAll(){ 
    
     	var viewwidth;
     	var viewheight;
     	var viewwidthhalf;
     	var viewheighthalf;
    	var obj=document.getElementById("Tester");
      
     // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
      
     if (typeof window.innerWidth != 'undefined')
     {
          viewwidth = window.innerWidth,
          viewheight = window.innerHeight
     }
      
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
     
     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
           viewwidth = document.documentElement.clientWidth,
           viewheight = document.documentElement.clientHeight
     }
      
     // older versions of IE
      
     else
     {
           viewwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewheight = document.getElementsByTagName('body')[0].clientHeight
     }
     
      	viewwidthhalf = viewwidth / 2;
      	viewheighthalf = viewheight / 2;
     	console.log(viewwidth,viewwidthhalf,viewheight,viewheighthalf);
    	//obj = document.getElementByClass('Form_Box_2');
     	obj.style.paddingLeft = (viewwidthhalf-125)+"px";
     	obj.style.paddingTop = (viewheighthalf-300)+"px";
     
     
    
    //-->
    }
    
    function ValidateForm()
    {
     var x=document.forms["MyForm"]["First Name"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Last Name"].value;
    if (x==null || x=="")
      {
      alert("Last name must be filled out");
     return false;
      }
      
     var x=document.forms["MyForm"]["Address"].value;
    if (x==null || x=="")
      {
      alert("Address must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Postcode"].value;
    if (x==null || x=="")
      {
      alert("Postcode must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Email"].value;
     var atpos=x.indexOf("@");
     var dotpos=x.lastIndexOf(".");
     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      alert("Email must be filled out");
      return false;
      
      return ture;
    }
      
    
    //-->
    </script>
    
    
    </head>
    
    <body  onload="resizeAll()" onresize="resizeAll()">
    
    
    
    
    <div Id="Tester">
    
    <Form id="MyForm"  onsubmit="return ValidateForm()" action="Untitled-2.html" method="post" >
    
    <p><lable for="Title">Title</lable><br/>
    
    <select id="Dropdown" name=select1>
    <option>Pick On</option>
    <option>Mr</option>
    <option>Miss</option>
    <option>Mrs</option>
    <option>Dr</option>
    <option>Master</option>
    </select>
    
    <p><label for="First Name">First Name</label><br/>
    
    <input type="text" name="First Name" value="" id="First Name" style="width:244px;" /></p>
    
    <p><label for="Last Name">Last Name</label><br/>
    
    <input type="text" name="Last Name" value="" id="Last Name" style="width:244px;" /></p>
    
    <p><label for="Address">Address</label><br/>
    
    <input type="text" name="Address" value="" id="Address" style="width:244px;" /></p>
    
    <p><label for="Postcode">Postcode</label><br/>
    
    <input type="text" name="Postcode" value="" id="Postcode" style="width:244px;" /></p>
    
    <p><label for="Phone Number">Phone Number</label><br/>
    
    <input type="text" name="Phone Number" value="" id="Phone Number" style="width:244px;" /></p>
    
    <p><label for="Email">Email</label><br/>
    
    <input type="text" name="Email" value="" id="Email" style="width:244px;" /></p>
    
    <p><label for="Favourite Ride">Favourite Ride</label><br/>
    
    <select id="Dropdown" name=select1>
    <option>Pick On</option>
    <option>Ride 1</option>
    <option>Ride 2</option>
    <option>Ride 3</option>
    <option>Ride 4</option>
    <option>Ride 5</option>
    </select>
    
    
    <p><input type="submit" value="Submit"/></p>
    
    </form>
    
    
    
    </div>
    
    
    
    
    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Posts
    343
    Quote Originally Posted by Sniperzown1 View Post

    Code:
    function ValidateForm()
    {
     var x=document.forms["MyForm"]["First Name"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Last Name"].value;
    if (x==null || x=="")
      {
      alert("Last name must be filled out");
     return false;
      }
      
     var x=document.forms["MyForm"]["Address"].value;
    if (x==null || x=="")
      {
      alert("Address must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Postcode"].value;
    if (x==null || x=="")
      {
      alert("Postcode must be filled out");
      return false;
      }
      
     var x=document.forms["MyForm"]["Email"].value;
     var atpos=x.indexOf("@");
     var dotpos=x.lastIndexOf(".");
     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      alert("Email must be filled out");
      return false;
      
      return ture;
    }

    Have a look at that final return value, and tell me if that is exactly what you have in your live code - in other words is that typo from the original, or just from copying into here?

  3. #3
    Join Date
    Apr 2012
    Posts
    3

    Little Confused

    I think i got a little confused in your answer, that code is copy - paste from the Original code, and what I'm hoping for the code to do is after the validation's have been made, and are all filled in, to redirect to *Untitled-2.html* but this wont happen, Hope this Clarifies your question.

    Thx
    Zown!
    xXx

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Some advice, if I may. Don't use an individual alert for each and every incorrect entry. Set a variable called warn to "", and for each incorrect entry:
    Code:
    warn += "New message for correcting.\n";
    Then at the end of the function, if warn == "", return true, else alert(warn) and return false.

    Also, at the end of the function you currently have return true spelled as return ture, and it immediately follows the return false with no closing } between them.

    Another thing - web documents should not have spaces in the name.
    <link href="Main Sheet.css" rel="stylesheet" type="text/css" />
    Change the filename to Main_Sheet.css, or Main-Sheet.css, or MainSheet.css, and then correct the href accordingly.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Apr 2012
    Posts
    3

    Thank You!

    Thank you both for the hlpe i didn't fully understand why not to use an Alert for each one, but im still new to this so im ok with that, after looking very closely to the {} i saw that like you said the *return ture* was not seperated by {}, after placing this in the code works fine now and when all the information has been placed in goes to the next page

    Big Thx to all that helped

    Thx
    Zown!
    xXx

Thread Information

Users Browsing this Thread

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

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