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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation Problem

    OK, so I have a form that I'm trying to validate with javascript on the client-side, but I'm having an issue. The alerts work fine, but in this case, even when there is content in the email field, I get the alert saying "Email must be filled out", and the form won't submit. I've been through this and through it. Can anyone see why this might be happening?

    I've done a number of searches (spent the last 5 hours researching this issue), to no avail. Almost all problems folks have with js validation are trying to get the alerts to work or the form to submit in the first place...not that the form alerts even when the field is filled.

    Here is the JS:
    <script language="javascript">
    <!--
    function validateForm()
    {
    var x=document.forms["contactform"]["fullname"].value;
    if (x==null || x=="") {
    alert("Name must be filled out");
    return false;
    }
    var y=document.forms["contactform"]["email"].value;
    if (y==null || y=="") {
    alert("Email must be filled out");
    return false;
    }
    return true;
    }
    //-->
    </script>


    And here is the form code itself:
    <form action="/gdform.php" method="post" name="contactform" onsubmit="return validateForm()">
    <input type="hidden" name="subject" value="Case Studies Access" class="style32" />
    <input type="hidden" name="redirect" value="case_studies.html" class="style32" />
    <input type="hidden" name="email" value="news@waterscreen.com" class="style32" />
    <table width="75%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>Name:</td>
    <td colspan="2">
    <input type="text" name="fullname" style="width: 400px" class="style32" />
    </td>
    </tr>
    <tr>
    <td>Email:</td>
    <td colspan="2">
    <input type="text" name="email" style="width: 400px" class="style32" />
    </td>
    </tr>
    <tr>
    <td>Company/Organization:</td>
    <td colspan="2">
    <input type="text" name="company" style="width: 400px" class="style32" />
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td colspan="2">
    <input type="submit" name="Submit" value="Submit" class="style32" />
    <input type="reset" name="Reset" value="Reset Form" class="style32" />
    </td>
    </tr>
    </table>
    <input type="hidden" name="form_format" value="html" class="style32"/>
    </form>


    The Company field is not required; the other two are.

    Thanks in advance. It's probably something stupid, but at this point I can't see anything off with the code, and have no idea where to go with this.
    Last edited by mbrown3; 05-26-2012 at 02:48 AM.

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, and I've tried it and without the "return true;" in the JS snippet, just FYI.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    That code brings back memories. Historical JavaScript and HTML from back in the HTML 3.2 Netscape days.

    1. Don't use language="javascript" - that was replaced with type="text/javascript" about 15 years ago.

    2. Don't wrap your script in <!-- and //--> as that only hides it from Netscape 1 and IE2 and earlier browsers that no one has used for about 15 or more years.

    3. Wrap your form field labels in label tags and use a for attribute to attach them to the form fields - so that those who can't see the form know what label belongs to which field. That will mean you will need to give each form field an id.

    4. Use that id to reference the field from JavaScript - the form collection also belongs to the Netscape 4 and earlier days from before JavaScript had the ability to properly interact with the web page.

    5. Input fields can never be null so testing for it is a waste of code.

    6. Even a single space in the field will result in it failing the =="" test so that test to is a waste and should be replaced with something that actually validates the field properly.

    7. Don't use alert - it is now only useful for debugging as it provides the ability to turn off JavaScript in some browsers. Instead use the proper JavaScript commands to insert the error message into the page itself.

    8. Don't jumble JavaScript and HTML together. The submit="return validateForm()" should be attached inside the JavaScript and not hard coded in the HTML.

    9. To ensure the form is loaded before the script runs you should attach the JavaScript at the bottom of the page.

    See http://javascriptexample.net/domform15.php for an example of how to attach JavaScript validations to the individual fields and http://javascriptexample.net/domform13.php for the extra code necessary to validate them all again when the form is submitted.

    The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    The reason why your form does not work is that you have two fields with the same name - email.

    Quote Originally Posted by felgall View Post
    The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.
    IMO that is insufficient as a x or a ? will pass the validation. Prefer to strip leading and trailing spaces
    x = x.replace(/^\s+|\s+$/g,"");
    and then as a minumum test for field length.

    But 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. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. A proper name may only contain letters, hyphen, space and apostrophe. This topic has been covered many times before in this forum.

    A wise man never plays leapfrog with a unicorn - Tibetan proverb

    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.

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply!

    Quote Originally Posted by felgall View Post
    That code brings back memories. Historical JavaScript and HTML from back in the HTML 3.2 Netscape days.

    1. Don't use language="javascript" - that was replaced with type="text/javascript" about 15 years ago.
    This was actually inserted by Microsoft Visual Studio 11 beta. I changed it to text/javascript, but then it didn't function. Not sure why, but

    2. Don't wrap your script in <!-- and //--> as that only hides it from Netscape 1 and IE2 and earlier browsers that no one has used for about 15 or more years.
    This was also inserted automatically by Microsoft Visual Studio 11 beta.

    3. Wrap your form field labels in label tags and use a for attribute to attach them to the form fields - so that those who can't see the form know what label belongs to which field. That will mean you will need to give each form field an id.
    Not exactly sure what you mean here. Are you talking about for ADA compliance, etc? This isn't the final code, I'm just trying to get the function working before I do anything else.

    4. Use that id to reference the field from JavaScript - the form collection also belongs to the Netscape 4 and earlier days from before JavaScript had the ability to properly interact with the web page.
    Again, not sure what you mean here (sorry, I'm not a noob with developing, but am really new to javascript).

    5. Input fields can never be null so testing for it is a waste of code.
    Why not? My understanding is that null is no value, whereas "" is an actual value that is empty (i.e., it relates to the database...which in this case doesn't matter, but I'd like to know for future reference). And when I started doing research into this, every single example included both NULL and "". No input field can be null?

    6. Even a single space in the field will result in it failing the =="" test so that test to is a waste and should be replaced with something that actually validates the field properly.
    OK. When trying to find such a thing, that was by far the most recommended method.

    7. Don't use alert - it is now only useful for debugging as it provides the ability to turn off JavaScript in some browsers. Instead use the proper JavaScript commands to insert the error message into the page itself.
    Again, this was the suggested method when I looked into it (almost all of the results). Not sure how to insert the javascript commands into the page, or what they are. Learning as I go here, but haven't seen anything other than the alert function. Looking at your example below now.

    8. Don't jumble JavaScript and HTML together. The submit="return validateForm()" should be attached inside the JavaScript and not hard coded in the HTML.
    How would this be done and still attach it to the submit function, which is itself in the form HTML?

    9. To ensure the form is loaded before the script runs you should attach the JavaScript at the bottom of the page.
    Yeah, I'll move it once I get it working. Old habit of putting all my code in the head section.

    See http://javascriptexample.net/domform15.php for an example of how to attach JavaScript validations to the individual fields and http://javascriptexample.net/domform13.php for the extra code necessary to validate them all again when the form is submitted.
    Thanks...this is confusing stuff here. I'll poke around with it. Seems overly complicated for what I want to do, but having it work is more important than how easy it is to code. Good to learn in the long-run anyway.

    The /\S+/ in the example is the validation for a field having something in it other than whitespace - ie, that the field is mandatory.
    Again, thanks. I very much appreciate the help. Thanks for putting up with my ignorance.

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [QUOTE=Philip M;1233428]The reason why your form does not work is that you have two fields with the same name - email.

    Yep...that fixed it. I didn't realize that having a field called "email" for where the results were being posted would "qualify" the same as an input field called "email". Makes sense, but it never crossed my mind.

    I'm still working on fixing the code, but at least it's temporarily functional. I don't understand the rest of your post yet, but working on it. And, FYI, I'm less concerned with actual "validation" than with simply having the fields being filled in before the function is passed. It's not remotely a crucial application, so it's not a big deal. But if I'm going to do it, I want to do it right, so I do appreciate the input all around. Thanks!
    Last edited by mbrown3; 05-26-2012 at 04:14 PM.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    IMO that is insufficient as a x or a ? will pass the validation.
    Of course x or ? would pass that validation - that validation is just demonstrating the test for the field being mandatory without actually testing what is in it. Basically that test corresponds to the HTML 5 attribute require or pattern="\S+" - both of which do exactly the same thing.

    The OP was comparing the field against null and "" so testing that it has something in it is an improvement.

    With my example script you simply put the field ids and corresponding regular expressions you want to use to validate each field of the form in the validations object at the top of the code and you get the same end result as if you'd specified an HTML 5 pattern. For example:

    Code:
    var validations = {
      nam : /\S+/
    , email : /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/
    };
    The only other change required to get it to validate any form is to add the calls at the bottom to attach the validation to the individual form fields - for example

    Code:
    addEvent(document.getElementById('nam'),
         'blur',
         valField);
    addEvent(document.getElementById('email'),
         'blur',
         valField);
    and to call all the validations again when the form is submitted

    Code:
    valForm = function(e) {
    return valField(e,document.getElementById('nam')) &&
    valField(e,document.getElementById('email'));
    }
     
    addEvent(document.getElementById('email').form,
           'submit',
           valForm);
    None of the rest of the code needs to be changed. You can even add validation of radio buttons (if you have them in the form) to the submit processing by passing any one of the ids used by the radio button group.

    It is basically an HTML 4 version of the HTML 5 require and pattern validations with radio button validation added. The only validations it doesn't handle are those that involve multiple fields - you'd need to add those to the valForm function.
    Last edited by felgall; 05-27-2012 at 12:21 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.


  •  

    Posting Permissions

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