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

    Required Form Fields

    I understand that to make form fields in HTML required, I simply have to use this script.

    Code:
     function validateForm()
    	 {
    	if (document.mailingList.fname.value=="")
    		{
    		alert("First name must be filled out.");
    		return false;
    		}
             }
    However, this doesn't work for me, as I'm using XHTML and I can't use the name attribute with the <form> tag. If I use the id attribute instead, obviously it doesn't work. So I looked around and tried this:

    Code:
     function validateForm()
    	 {
    	if (document.getElementById("mailingList").fname.value=="")
    		{
    		alert("First name must be filled out.");
    		return false;
    		}
             }
    But it still didn't work. Any help?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    give your form field (not just your form) an id, then use it:
    Code:
    if (document.getElementById("form_field_id").value=="")
    although being that one blank space in your form field will satisfy that condition, it's hard to define it as "required"

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    if (document.forms[0].fname.value=="") {

    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. A proper name may only contain letters, hyphen, space and apostrophe. (My newspaper reports a case where a bank customer alled O'Hara could not access his account as apostrophes were not permitted in the field).

    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.
    Last edited by Philip M; 10-06-2012 at 07:59 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.

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Most likely I just didn't understand either of you, but neither of those worked.

    @Xelawho, what do you mean by giving my form field an id? I tried putting a <span> around the form and giving it an id, but that did nothing. I also tried just using the ids of the individual text boxes, but that didn't work either.

    @Phillip M, that simply didn't work. Not sure if I was supposed to add anything, I tried messing with it a little bit but didn't get it to work.

    I'm going to put my XHTML code here in case if it makes any difference. Do note that I have multiple fields, if that make any difference.

    Code:
    <form id="mailingList" action="subscribe.html" method="post" onsubmit="return validateForm()">
    <p class="maintext">
    First Name: <input type="text" name="fname" value="" size="20" /><br />
    Last Name: <input type="text" name="lname" value="" size="20" /><br />
    E-mail Address: <input type="text" name="email" value="" size="30" /><br />
    Age: <input type="text" name="age" value="" size="2" maxlength="3" /><br />
    Sex: <select name="sex"><option value="male">Male</option><option value="female" />Female</option></select><br /><br />
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
    </p>
    </form>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Giantg52 View Post
    @Phillip M, that simply didn't work. Not sure if I was supposed to add anything, I tried messing with it a little bit but didn't get it to work.
    Wel, it works for me Perhaps the problem is that you have two opening braces { one (correctly) on the same line and another one (permissible but less good practice) on the following line.

    xelawho told you to assign an id (as well as a name) to each element (form field) - you have not done that.

    e.g.
    First Name: <input type="text" name="fname" id = "fname" value="" size="20" /><br />

    But both of us have pointed out the inadequacy of this simple "validation".

    and then address it with

    if (document.getElementById("fname").value=="") { // place opening brace on the same line, not the folowing line


    But both of us have pointed out the serious inadequacy of this simple "validation".
    Last edited by Philip M; 10-07-2012 at 10:47 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.

  • Users who have thanked Philip M for this post:

    Giantg52 (10-07-2012)

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I figured I was doing something wrong, somehow I lost the second 'a' in javascript XD. Thanks for your help .


  •  

    Posting Permissions

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