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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Form validation syntax error, cannot figure out

    Hello,

    I am attempting to validate the following form. This is my first time attempting this complex of a form validation. The JS has 5 things to validate: name, email address, phone number, reason for contact, and existence of a message (at least 15 characters).

    DreamWeaver is saying that there is a syntax error on line 12 of the javascript script, where there is the following line: { return true; }

    I have the following questions:
    1. How to I fix this aforementioned syntax error on line 12 of the JS?

    2. is my drop down menu set up correctly? (the "select reason for contact" menu)

    3. I want to clarify something. In the code of this following function, where does "Select A Reason" come into play? What is that referring to? The default selection of the drop down menu, as it exists in html? Is it saying that, if "Select A Reason" is still selected, then this function should be called, which will tell the user to make sure he/she has selected a reason?

    Code:
    function madeSelection(elem, helperMsg){
    	if(elem.value == "Select A Reason"){
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}else{
    		return true;
    	}
    HTML:

    Code:
    <div class="background">
    <div id="contactpageheading">
      <blockquote>
        <h1>Contact Vanadia</h1>
      </blockquote>
    </div>
    <div id="transboxleftcontactform">
    <form method="POST" name="contactform" action="contact.html"> 
    <p>
    
    Your Name: <br /> &nbsp;
    <input type="text" id="name">  <br />
    
    <br/>Email Address: <br /> &nbsp;
    <input type="text" id="email"> <br /> 
    
    <br/>Phone Number: <br /> &nbsp;
    <input type="text" id="phone"> <br />
    
     <br/>Reason for Contact: <br /> &nbsp;
     <select name="Reason"> 
      <option value="select_reason">Select A Reason</option>
      <option value="Booking_modeling">Booking: Modeling</option>
      <option value="Booking_acting">Booking: Acting</option>
      <option value="Comment">Comment</option>
      <option value="Question">Question</option>
     </select>
    </p>
    </form>
    </div>
    
    <div id="transboxrightcontactform">
    <form method="POST" name="contactform" action="contact.html">
      <p> Message:<br />
        <textarea name="message" id="message" rows="20" cols="32"
    	> </textarea>
      </p>
      <input type="submit" value="Submit" 
    	style="	display: block;
        		margin-left: auto;
    			margin-right: auto;"
    	> <br>
    </form>
    </div>
    </div>
    </div>

    JAVASCRIPT:
    Code:
    var name = document.getElementById('name');
    	var email = document.getElementById('email');
    	var phone = document.getElementById('phone');
    	var reason = document.getElementById('reason');
    	var message = document.getElementById('message');
    	
    	if(isAlphabet(name, "Please enter only letters for your name")){
    		if(emailValidator(email, "Please enter a valid email address")){
    			if(isNumeric(phone, "Please enter a valid zip code")){
    				if(madeSelection(reason, "Please Choose a Reason for Contact")){
    					if(lengthRestriction(message, 1, 15)) 
    					{		return true;  }
    						}
    					}
    				}
    			}
    		}
    	}
    	return false;
    	
    
    
    function notEmpty(elem, helperMsg){
    	if(elem.value.length == 0){
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    	return true;
    }
    
    function isAlphabet(elem, helperMsg){
    	var alphaExp = /^[a-zA-Z]+$/;
    	if(elem.value.match(alphaExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function emailValidator(elem, helperMsg){
    	var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    	if(elem.value.match(emailExp)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function isNumeric(elem, helperMsg){
    	var numericExpression = /[0-9]{3}-[0-9]{3}-[0-9]{4}/;
    	if(elem.value.match(numericExpression)){
    		return true;
    	}else{
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}
    }
    
    function madeSelection(elem, helperMsg){
    	if(elem.value == "Select A Reason"){
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}else{
    		return true;
    	}
    }
    function lengthRestriction(elem, min, max){
    	var uInput = elem.value;
    	if(uInput.length >= min && uInput.length <= max){
    		return true;
    	}else{
    		alert("Please enter between " +min+ " and " +max+ " characters");
    		elem.focus();
    		return false;
    	}
    }
    Thanks for your help,
    I appreciate any advice

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Well, for starters, NEVER NEVER NEVER trust NightmareStalker (the aforesaid misnamed DreamWeaver) to do anything right in JavaScript.

    Use a real debugger. Ignore most anything DrunkWalker says.

    But just because DoofusWhacker is occasionally right, let me look at it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Ummm...is that supposed to be the *REAL* JavaScript code?

    And *ALL* of it?

    Because AS IT IS, your JS code is never going to do ANYTHING.

    It certainly isn't going to validate your form or prevent the form from being submitted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Oh, and as it happens, DingleWimper is *sort* of correct.

    You do have a syntax error. SORT of where DumbWoofer points out, but not quite.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    And by the by, you have *TWO* <form>s on that page. Yet you seem to THINK that they will act as a single form.

    Nope. Won't happen. Period.

    And not to ask another dumb question, but...

    How do you expect the <form> to be able to do anything when you code it as
    Code:
    <form method="post" action="contact.html">
    ???

    You can *NOT* send "post" data to an HTML page. You must send "post" data to some kind of server-side page.

    If you are using a URL rewrite to rewrite "contact.html" to some PHP/ASP/JSP page, then it can work. But not otherwise.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    And finally, and maybe most important, *NONE* of your form fields will be sent to "contact.html" or any other page.

    That's because form fields WITHOUT a NAME are COMPLETELY IGNORED in the form submission process. Having an ID is USELESS for form submittal purposes.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    My first question would be why do you have two forms of the same name and action? and in a div with the same id - id's must be unique.

    return is used to return from a function, but that return is not within a function - unless it is a continuation of the first code sample(?). Perhaps your brackets { } are not correct.

    You also have a spare closing </div> .. according to what you've shown.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The best way to test JavaScript for syntax errors is to go to http://jslint.com and paste your script there. Check the box that says "Assume a browser" and then run that form to get a detailed list of all the errors and potential errors in the code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    javascriptlint is an alternative.
    Attached Thumbnails Attached Thumbnails Form validation syntax error, cannot figure out-jslint.png  
    Last edited by AndrewGSW; 12-11-2012 at 01:52 AM. Reason: screenshot
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Here's my suggested solution for a way to do it:
    Code:
    <html>
    <body>
    <form method="post" id="contactform" action="contact.html"> 
    <div class="background">
        <div id="contactpageheading">
            <blockquote><h1>Contact Vanadia</h1></blockquote>
        </div>
        <div id="errors" style="color: red; font-weight: bold;"></div>
        <div id="transboxleftcontactform">
            <p>
    
                Your Name: <br /> &nbsp; <input type="text" name="name">  <br />
    
                <br/>Email Address: <br /> &nbsp; <input type="text" id="email"> <br /> 
    
                <br/>Phone Number: <br /> &nbsp; <input type="text" name="phone"> <br />
    
                <br/>Reason for Contact: <br /> &nbsp;
                <select name="reason"> 
                    <option value="select_reason">Select A Reason</option>
                    <option value="Booking_modeling">Booking: Modeling</option>
                    <option value="Booking_acting">Booking: Acting</option>
                    <option value="Comment">Comment</option>
                    <option value="Question">Question</option>
                </select>
            </p>
        </div>
    
        <div id="transboxrightcontactform">
            <p> 
                Message:<br />
                <textarea name="message" rows="20" cols="32"></textarea>
            </p>
            <input type="submit" value="Submit" 
    	       style="display: block; margin-left: auto; margin-right: auto;"> <br>
        </div>
    </div>
    </form>
    
    <script type="text/javascript">
    (
      function()
      {
          var form = document.getElementById("contactform");
          var name = form["name"]; // form.name would mean the name of the form, so must use this
          var email = form.email;
          var phone = form.phone;
          var reason = form.reason;
          var message = form.message;
    
          form.onsubmit = function() 
          {	
              var oops = "";
              if( ! isName(name) ) { oops +="Please enter only letters for your name<br>"; }
              if( ! emailValidator(email) ) { oops +="Please enter a valid email address<br>"; }
              if( ! isPhone(phone) ) { oops +="Please enter a valid phone number<br>"; }
              if( reason.selectedIndex == 0 ) {  oops += "Please Choose a Reason for Contact<br>"; }
              if( message.value.length < 10 || message.value.length > 255 ) 
              {
                  oops += "Message must be 10 to 255 characters in length<br>";
              }
              if ( oops == "" ) { return true; } // okay to submit
    
              document.getElementById("errors").innerHTML = oops;
              return false;  	
          }
    
          function isName(elem)
          {
              var alphaExp = /^[a-zA-Z]{2,30}(\s+[a-zA-Z]{2,30})?$/;
              return alphaExp.test( elem.value );
          }
    
          function emailValidator(elem, helperMsg)
          {
              var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    	  return emailExp.test(elem.value);
          }
    
          function isPhone(elem)
          {
              var ph = elem.value.replace(/\D/g,""); // remove all but digits
              if ( ph.length != 10 ) { return false; }
              elem.value = "(" + ph.substr(0,3) + ") " + ph.substr(3,3) + "-" + ph.substr(6);
              return true;
          }
      }
    )();
    </script>
    </body></html>
    Some more notes:
    (1) Named <form>s are obsolete. Use an ID for the form instead.
    (2) You should stop using alert( ) to give error messages. Some browser already allow users to suppress alerts. All will soon.
    (3) Besides, it's crappy validation to only show one error when there are 3 or 4.
    (4) Your phone number format was WAY too inflexible. Look how I did it: Strip it to digits only and if there are 10 digits, call it valid and then reformat the digits the way you want.
    (5) SURELY you didn't REALLY mean you wanted a message that was no more than 15 characters long??? IF that was true, why did you make the <textarea> so large???
    (6) If possible, don't use "name" for a form field name. It's too easily mistaken for the name of the <form> itself. See the code I had to use to make sure it was understood. If possible, at least use "Name" (JavaScript will see name and Name as too separate things).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, holy crap guys! Thanks so much for the replies, they are all very very helpful. As you can tell, I am new to this stuff, but I am interested in learning as fast as I can.

    As you can tell, I am very new to this stuff. I know basic html, css, and a tiny bit of php. This is my first website. Thanks so much though guys, I will look through your responses and make some fixes tomorrow.

    I know practically none of the concepts you guys are throwing at me, so I'll give 'em a look-see as well.

    I wanted to explain the two forms-- I had two forms so that I could format them in CSS separately, in order to get the right spacing/format I wanted. Check out this image, its a screenshot of the contact page as its displayed.


    Thx again, I can't believe how helpful this forum is.


    btw, here is the CSS i have... some of it may be wrong/unnecessary, again, thats why I am here-- so you pros can help me out:

    Code:
    .background
      {
      width:750px;
      height:500px;
      background:url(../images/allimages/resumebox750x500.png) repeat;;
    
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top:5px;
    	margin-bottom:15px;
      }
    
    #transboxleftcontactform
      {
    	float:left;
    	width:200px;
    	height:100px;
    	margin:20px 0 0 50px; !important
    	opacity:0.9;
    	filter:alpha(opacity=90); /* For IE8 and earlier */
    
      }
      
    
    #contactpageheading
    	{
    	margin: 0 0 0 150px;
    	padding-top: 20px;
    	}
    	
    #transboxleftcontactform p
      {
      border:medium;
      margin:0px 0px; 
      font-weight:bold;
      color:#000000;
      }
    	
    
    #transboxrightcontactform
      {
    	display:block;
    	float:left;
    	width:250px;
    	height:50px;
    	margin-top:15px; !important
    	margin-left: 100px;
    	margin-right:250px;
    	opacity:0.9;
    	filter:alpha(opacity=90); /* For IE8 and earlier */
      }
    
    #transboxrightcontactform textarea { resize:vertical; max-height:300px; min-height:300px; }
    #transboxrightcontactform textarea { resize:horizontal; max-width:230px; min-widht:200px; }
    
    #transboxrightcontactform p
      {
    	
    	margin:0px 5px; 
    	font-weight:bold;
    	color:#000000;
    	overflow:auto;
      }
    Last edited by ChipotleP; 12-11-2012 at 04:58 AM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Generally speaking, a <form> doesn't change the appearance of a page.

    It is true the a <form> is a "block" element, so be default it will start on a new "line" on the page (as if there was a <br> before it), but even that you can override.

    In general, the best thing to do is to put the <form> tag directly after then<body> and then put the </form> directly before the </body> (or just before the <script> tag if you code as I showed), and then forget about it.

    Use <div>s, as you did, to layout the page.

    The sole exception is the VERY RARE case where you really need to <form>s on a page. When and if that happens to you, then come back and talk about it.

    Anyway, no matter what, you can only submit *ONE* form from a page at a time. In your case, if you submitted the first <form>, the <textarea> would not have been submitted, for example.

    Finally, you say you wanted format the forms separately in your CSS, but you have nothing at all in that CSS that *ACTUALLY* depends upon any <form>.

    You have
    Code:
    <div id="transboxrightcontactform">
    and your refer to that in your CSS, but that is *NOT* a form. That is a <div>. Which is exactly what it should be.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    p.s.: I added that CSS to my example code and it showed exactly as you wanted it to.

    The change to a single <form> had no impact whatsoever on the appearance.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha, Old Pendant, thanks so much dude, considering you must have been LYAO seeing my code attempt to route a form to a .html page.

    Thanks for pointing that out, once I realized how dumb that is, I was like.. uh.. oops. Yeah, client side - server side. I am learning php right now, so I'll be routing that page to a .php form handling page. I totally forgot about that whole concept.

    However, I will say that I do realize the this last CSS concept you bring up, that calling up a div that is named 'form' of some sort, is still just referring to the div. But again, thx for clarifying.

    Now that I connect the dots, I have a much better sense of how all this code works.

    Also, thanks for pointing out that the JS for my message validation would have only let is have 15 chars max. I dunno what I was thinking when I entered (1, 15), i meant to have 15 be the minimum actually, so i should have initially put (15, <some number>).

    Thanks for working on the JS, and checking on the CSS for me, I owe you more than one.
    Last edited by ChipotleP; 12-13-2012 at 05:13 PM.

  • #15
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OldPendant,

    I am getting a syntax error on line 5.

    here are lines 1 - 7:

    Code:
    <script type="text/javascript">
    (
      function()
      {
          var form = document.getElementById("contactform");
          var name = form["name"]; // form.name would mean the name of the form, so must use this
          var email = form.email;
    Why do you think that would be?
    my form is headed as such:
    <form method="post" id="contactform" action="contact.html">

    i copied all of your code and everything..


  •  
    Page 1 of 2 12 LastLast

    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
    •