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

    Validating pizza form

    I'm creating a page for pizza orders and I'm including toppings (pepperoni, bacon, ham, cheese), crust (normal, cheese-filled), and how to pay (credit card, cash) and then I need to validate the form. How do I do this?

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Difficult to answer, without seeing any actual code.

    Basically, you give the form an onSubmit event that calls a function that can be used to make sure that not only are certain fields filled out, but that they are filled properly (ie, phone number is a certain format, etc.)

    But this is just client-side validation - anyone can turn off JavaScript in their browser and bypass validation. I do both client-side and server-side validation.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You can't surf many sites with scripting turned off including eBay, Amazon, Facebook, Twitter, and most of the rest. I think you'll be fine with client-side although server side is better.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by zoobie View Post
    You can't surf many sites with scripting turned off including eBay, Amazon, Facebook, Twitter, and most of the rest. I think you'll be fine with client-side although server side is better.
    And what about the unscrupulous people who will turn off JavaScript after landing on the form page, submitting spurious data just because they are bored? Believe me, use both client-side and server-side. Not doing so is just asking for unpleasant things to happen.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Server side validation is essential - that's what prevents bad data being processed.

    Client side validation is for the convenience of the person filling out the form to tell them about errors sooner. If they turn it off then they have to wait until after they submit the form for the server validation to tell them about the errors.
    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.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    And also that some big sites are badly coded doesn’t mean it’s OK to do so yourself. Always strive to live up to the highest possible standard.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by valentibabe View Post
    I'm creating a page for pizza orders and I'm including toppings (pepperoni, bacon, ham, cheese), crust (normal, cheese-filled), and how to pay (credit card, cash) and then I need to validate the form. How do I do this?
    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

    But this question has been asked several times before. Hint - try using the search featutre of this forum.

    In the real world server-side validation is indeed absolutely essential. But I assume this is just a students' training exercise in how to create Javascript validation.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 04-29-2013 at 09:41 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.

  • #8
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I've got so far...
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <script type="text/javascript">
    function validateForm()
    {
    var x=document.forms["myform"]["payment"].value;
    if (x==null || x=="")
      {
      alert("Payment must be filled out");
      return false;
      }
    }
    </script>
    </head>
    
    <body bgcolor=#FEFFC8>
    <form name="myform" action="demo_form.asp" onsubmit="validateForm()" method="post">
    
    <h1>Create Your Pizza</h1>
    
    <p><strong>What size pizza would you like?</strong><br />
    	<input type="radio" value="large" name="size" id="1" tabindex="1" />Large (10 slices)<br />
    	<input type="radio" value="medium" name="size" id="2" tabindex="2"/>Medium (6 slices)<br />
    	<input type="radio" value="small" name="size" id="3" tabindex="3"/>Lonely (3 slices)<br />
    </p>
    <p><strong>What kind of crust does your heart desire?</strong><br />
    	<select name="crust" id="crust" size="1">
    	<option value="cheese filled" tabindex="4">Cheese Filled</option>
    	<option value="deep dish" tabindex="5">Deep Dish</option>
    	<option value="thin crust" tabindex="6">Thin Crust</option>
    </select>
    </p>
    <p><strong>What toppings are you craving?</strong><br />
    	<input type="checkbox" name="toppings" id="toppings" value="pepperoni" tabindex="7">Pepperoni<br />
    	<input type="checkbox" name="toppings" id="toppings" value="bacon" tabindex="8">Bacon<br />
    	<input type="checkbox" name="toppings" id="toppings" value="sausage" tabindex="9">Sausage<br />
    	<input type="checkbox" name="toppings" id="toppings" value="ham" tabindex="10">Ham<br />
    </p>
    <p><strong>How would you like to pay?</strong><br />
    	<input type="radio" value="cash" name="payment" id="11" tabindex="11" />Cash<br />
    	<input type="radio" value="credit card" name="payment" id="12"  tabindex="12">Credit Card<br />
    	<input type="radio" value="euros" name="payment" id="13" tabindex="13">Euros<br />
    </p>
    <p>
    	<input type="submit" value="Submit" onclick="validateform()"> 
    </p>
    </form>
    </body>
    
    </html>
    Can anyone help with the validation part?

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    1. I suggest that you update the HTML to version 4 or 5 - the HTML 3.2 you are using was replaced by HTML 4 back in 1997 and makes it harder for the CSS and JavaScript to work.

    2. Move the JavaScript to just before the </body> tag - that way the HTML it needs to interact with will have loaded first.

    3. Ids are not allowed to start with a number. Also they must be unique - you can't use the same one twice in the same page.

    4. If your form fields have ids then the easiest way to interact with them from JavaScript is using document.getElementById

    5. input fields can never have a null value so testing for that is pointless. Even a single space gets around the empty string test so get rid of that too and replace it with a test for what is actually allowed to be entered.
    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.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    That is not much of an effort.

    A form field can never be null - only "" (blank) (but a single space is then not a blank field).

    You should study how to validate radio button groups. Here is a simple example:-

    Code:
    <form id = "myform">
    <input type = "radio" name = "rad1" value = "NE">North East
    <input type = "radio" name = "rad1" value = "NW">North West
    <input type = "radio" name = "rad1" value = "SE">South East
    <input type = "radio" name = "rad1" value = "SW">South West
    <input type = "radio" name = "rad1" value = "Midlands">Midlands
    <br><br>
    <input type = "button" value = "Which Radio Selected?" onclick = "chkrads()">
    </form>
    
    <script type = "text/javascript">
    
    function chkrads() {
    var chosen = "None";
    var which = -1;
    var f = document.getElementById("myform")
    var len = f.rad1.length;
    for (i = 0; i <len; i++) {
    if (f.rad1[i].checked) {
    chosen = f.rad1[i].value;
    which = i;
    }
    }
    if (chosen == "None") {
    alert("No Location Chosen");
    }
    else {
    alert("You selected  " +  chosen +  " which is Radio Button " + which );
    }
    }
    
    </script>
    Assigning a name to a form is obsolete and deprecated. Use an id instead. But ids may not start with a number, so an id of "1" is invalid.

    onclick="return validateform()">

    It is not really in your best interests that others do your all or most homework for you. Many people would regard that as cheating. Furthermore your teacher may gain a false and exaggerated idea of your programming capabilities and so not offer you the support you need. Also, if you hand in other people's work which you do not completely understand, then you will start to fall behind and your difficulties will increase.
    Last edited by Philip M; 04-29-2013 at 10:11 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.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    BTW, I do not agree with felgall re using ids with form fields. Only a form field with a name assigned to it will be submitted to the server. If you want to use ids, that is fine, but then you must assign both a name and an id (preferably the same) to each field, which seems to me to be pointless duplication. But ids must be unique, while a group of radio buttons must have the same name.

    The form itself should have an id, not a name. Form names are now deprecated and obsolete.

    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.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by Philip M View Post
    BTW, I do not agree with felgall re using ids with form fields. Only a form field with a name assigned to it will be submitted to the server. If you want to use ids, that is fine, but then you must assign both a name and an id (preferably the same) to each field, which seems to me to be pointless duplication
    The ids are needed to semantically attach the labels to the form fields within the HTML so you might as well use them from the JavaScript as well. Certainly if you have ids on the fields in the HTML then that is the easier way to reference them from the JavaScript. The only way to attach a label to a form field without giving the form field an id is to make the form field itself a part of its own label by wrapping the form field inside the label - which in my view is not semantic - and which can't be done unless the field and its label are immediately adjacent in the HTML source.

    I agree that there is no point in giving the form fields an id just for the JavaScript to use as the JavaScript can reference the fields using the name but when there is an id there then that is the easier one to use in the JavaScript.

    I agree that with the exception of radio buttons the same id and name should be used if you do use ids.
    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.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Quote Originally Posted by felgall View Post
    ...The only way to attach a label to a form field without giving the form field an id is to make the form field itself a part of its own label by wrapping the form field inside the label - which in my view is not semantic - and which can't be done unless the field and its label are immediately adjacent in the HTML source.
    Okay, why isn't it "semantic"? Why is wrapping a <label>...</label> around a form field any less semantic than putting a field inside <div>...</div> is?

    And really, what is the point in a <label> that is *NOT* immediately adjacent to the field tag?

    I'm not arguing with you here, Felgall; I truly am curious. I use wrapped <label>s all the time, because they are easier to code and, to me, just as effective. And they avoid the need for the silly id's in the form fields.

    I agree that with the exception of radio buttons the same id and name should be used if you do use ids.
    Ummm...and what about same-named checkboxes? A pretty common occurrence for many server-side data collection schemes. I can see the point (sometimes) of using separate ids and names for such.
    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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay, why isn't it "semantic"? Why is wrapping a <label>...</label> around a form field any less semantic than putting a field inside <div>...</div> is?
    placing the field inside the label semantically identifies the field as a part of the label. The label for the email address field is no longer just "email address" it is "email address" plus the value of the input field.

    for example:

    Code:
    <label>Email address: <input type="text" value="xx@yy.com"></label>
    I see that as semantically identifying a label of "Email address xx@yy.com" that is not associated with anything. There is nothing there to identify what the label is for since the for attribute is missing. While allowing the visitor to dynamically change the label by providing part of the label as a form field, you'd still need the for attribute and another input field with an id to identify what the "Email address dynamicuserenteredemail@somewhere.com" label refers to.

    Placing it inside a div indicates that it is part of the content of the div so placing it inside the label indicates that it is part of the label.

    Quote Originally Posted by Old Pedant View Post
    And really, what is the point in a <label> that is *NOT* immediately adjacent to the field tag?
    One possibility would be a table of input fields with the labels in the row above the corresponding inputs. They are adjacent on the screen but not in the source.

    Quote Originally Posted by Old Pedant View Post
    Ummm...and what about same-named checkboxes? A pretty common occurrence for many server-side data collection schemes. I can see the point (sometimes) of using separate ids and names for such.
    I overlooked that one. Definitely another situation where an id can be required by JavaScript - particularly when using PHP on the server where [] needs to be included in the name - which makes using the name in JavaScript more complicated.
    Last edited by felgall; 04-30-2013 at 03:29 AM.
    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.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    Sorry, I read what you are saying re labels, but it feels to me like an artificial distinction. A purist argument for the sake of purism, not for any practical reason. (Unlike many of your very strong arguments about JavaScript code positioning, et al.)

    The only real use I have ever seen for labels is enabling the checking of checkboxes and radio buttons by clicking on the label text. It seems utterly pointless, to me, to put a label on an <input> field, for example. Okay, you can click on such a label and then...so what?

    So from a *practical* standpoint, not a theoretical one, I really can't see the usage difference between
    Code:
    <label><input type="radio" name="gender" value="M"> Male</label>
    and
    Code:
    <input type="radio" name="gender" value="M" id="genderM"><label for="genderM"> Male</label>
    And saying that the <input> becomes part of the label is...well, just silly. Yes, I see it from your theoretical standpoint. But in what way does it change the user interface or the usability of the <label>?

    When and if they enforce the rule that <label>s *MUST* have a for= in them, I'll start coding that way. But until then... If it's legal HTML, I don't see any reason not to use it.

    On this one I'm just going to have to let you have the theoretical high road and stick to my low road.
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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