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 Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can i add some verification and required fields to this form

    Hi

    I have made the below form but i want to make some of the boxes etc a mandatory/required e.g. so they have to fill them in. How would i do it?
    Last edited by samhor; 01-18-2013 at 01:50 AM. Reason: mistakes

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    I stripped it down to a bare minimum example and indented to make it easier to follow; you get to expand it as needed:
    Code:
    <script type="text/javascript">
     function CheckForm() {
      IName=document.forms[0].username.value;
      if (IName == '') {
       alert('Name is required.');
       return false;
      }
     return true;
    }
    </script>
    
    <form onsubmit="return CheckForm();">
     <label for="Name">Name:</label>  
     <input type="text" name="username" size="50" />
     <input type="submit"> 
    </form>

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Server-side validation is generally best (users can disable javascript - or you can force the form to submit via JavaScript, so if it's disabled the form can't submit.)

    Basically, you get the value/selectedIndex of the form inputs via the DOM. Client-side validation that I like (give the form a name; change submit button to input type="button" and add onclick="return validateForm(this.form);"):
    Code:
    function validateForm(formObj){
    var warn = "";
    formObj.username.value = formObj.username.value.replace(/^\s|\s$/g,"");// trim whitespace from beginning and end of string
    if(formObj.username.value.length < 5){ warn += "Please enter your Name.\n"; }
      ...
    if(formObj.country.selectedIndex == 0){ warn += "Please select a Country.\n"; }
    if((!formObj.choice[0].checked) && (!formObj.choice[1].checked)){ warn += "Please let us know if we can use your email for SPAMMING.\n"; }
    
    if(warn == "") {formObj.submit(); }
    else{ alert(warn); return false;}
    
    }
    ^_^

    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".

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,616
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by WolfShade View Post
    Server-side validation is generally best (users can disable javascript - or you can force the form to submit via JavaScript, so if it's disabled the form can't submit.)
    Doing that would prevent those who don't have JavaScript from ever being able to submit the form. Depending on which country your visitors are in and what anti-discrimination laws apply in their country not allowing those without JavaScript to use a form may be illegal and a large fine might result.

    There are some groups of disabled people who either use browsers that don't support JavaScript or where enabling JavaScript would make it impossible for them to interact with the page and such people have been known to take legal action when sites discriminate against them by not providing them with a way to interact with the site. There was one case where a large retailer whose site discriminated by requiring JavaScript that was settled out of court for a few million dollars.

    Even where your site is unimportant enough to not fall foul of anti-discrimination laws, do you really want to annoy some of your visitors and have them telling all your friends how useless your site is?
    Last edited by felgall; 01-16-2013 at 09:32 PM.
    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.

  • #5
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Hello

    I have tried amending this but when adding the below it just stops working and the message doesn't pop up any more... Any ideas?
    Last edited by samhor; 01-18-2013 at 01:50 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    The "return true;" line belongs at the end of the function. Do all of the validation parts (name, address, ....) and their respective "return false;" lines first. If the user gets past all of those error checks, then the function returns the true value and the form submits.

  • #7
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Drop down menu issue

    Quote Originally Posted by jalarie View Post
    The "return true;" line belongs at the end of the function. Do all of the validation parts (name, address, ....) and their respective "return false;" lines first. If the user gets past all of those error checks, then the function returns the true value and the form submits.
    Yes thanks got it working now.. How much would the code change for using drop down menus. I have tried with the below but can't seem to get it working.
    Last edited by samhor; 01-18-2013 at 01:51 AM. Reason: update

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    You first pick up the index of the selected item, use that to get the "text" and "value" items, and then decide if the user has chosen something other than the default:
    Code:
      SI=document.forms[0].country.selectedIndex;     // select index
      ST=document.forms[0].country.options[SI].text;  // ...on-screen text
      SV=document.forms[0].country.options[SI].value; // ...embedded value
      if (SV == "Default") { alert('Pick something'); return false; }
    The "Oz", "UK", and "Usa" pieces are the "text" items and the "AUS", "UK", and "USA" pieces are the "value" items.

  • #9
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question alert not working

    [QUOTE=jalarie;1306750]You first pick up the index of the selected item, use that to get the "text" and "value" items, and then decide if the user has chosen something other than the default:
    thanks
    Last edited by samhor; 01-18-2013 at 01:51 AM.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,616
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Don't forget to get rid of the debugging alert() calls before you make the page live. You don't want people checking the checkbox that most broswers add to alert() to make it more useful for debugging.
    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.

  • #11
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    thanks
    Last edited by samhor; 01-18-2013 at 01:52 AM.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    Doing that would prevent those who don't have JavaScript from ever being able to submit the form. Depending on which country your visitors are in and what anti-discrimination laws apply in their country not allowing those without JavaScript to use a form may be illegal and a large fine might result.

    There are some groups of disabled people who either use browsers that don't support JavaScript or where enabling JavaScript would make it impossible for them to interact with the page and such people have been known to take legal action when sites discriminate against them by not providing them with a way to interact with the site. There was one case where a large retailer whose site discriminated by requiring JavaScript that was settled out of court for a few million dollars.
    Horsepoo. Specify an authority, please. A person of your stature ought not to propagate silly stories like that.

    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.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by samhor View Post
    I'm also thinking of adding an email field. How would i write the code to validate the email address e.g. an @ has been entered?
    Have you tried using the search feature of this forum? That question has been asked and answered many times.

    Code:
    if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email.value))) {   /// returns true if invalid address syntax
    felgall might wish to replace {2,4} by {2,6}. In reality the domains travel and museum are very rarely found. In fact, never in my experience.

    Simply testing for the presence of an @ is completely inadequate. Even testing for the presence of a single @.

    Another (additional?) way is to cause the user to enter his email address twice to confirm. That still does not offer complete protection, but if the user cannot get his own email address correct that is his responsibility. Nothing will prevent typos such as @gmial.com.
    Last edited by Philip M; 01-17-2013 at 08:53 AM.

    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.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by samhor View Post
    Yes thanks got it working now.. How much would the code change for using drop down menus. I have tried with the below but can't seem to get it working.

    Code:
    Icountry=document.forms[0].country.value;
      if (Icountry == '') {
       alert('Country is required.');
       return false;
      }
    -----------------------------
    <label for="country">Country:</label> 
      <select name="country">  
        <option selected="" value="Default">Choose a Country </option>  
        <option value="AUS">Oz</option>  
        <option value="UK">UK</option> 
        <option value="USA">Usa</option> 
      </select>
    Again, have you tried using the forum search feature?

    Code:
    Icountry=document.forms[0].country.value;
    if (Icountry == "Default") {  // the value of the first option with text Choose A Country
    alert ('Country is required.');
    return false;
    }
    -----------------------------
    <label for="country">Country:</label> 
      <select name="country">  
        <option selected value="Default">Choose a Country </option>  
        <option value="AUS">Australia</option>  
        <option value="UK">UK</option> 
        <option value="USA">USA</option> 
      </select>

    address=document.forms[0].address.value; // avoid using the same name for an HTML element and a Javascript variable. Always include the var keyword to make your variable local to the function.

    It's a really bad idea to use NUMBERED forms. (document.forms[0])
    And NAMED forms are considered obsolete.
    You should give IDs to your <form> tags.

    if (address == '') {
    Be aware that 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 and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    <javascript> should be <script type = "text/javascript">


    I have the idea that your grasp of Javascript at present is not really up to what you are trying to achieve.
    Last edited by Philip M; 01-17-2013 at 08:54 AM. Reason: Typo

    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.

  • #15
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Closing js?

    thanks for the info very helpful.

    I have changed <script> to <script type="text/javascript">

    would i still end it with <script> because </script type="text/javascript"> is an error ?
    Last edited by samhor; 01-17-2013 at 11:43 AM. Reason: submitted to quick


  •  
    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
    •