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

    Trouble with Simple Javascript Form Validation

    I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have:

    the xhtml file

    <?xml version = ″1.0″ encoding = ″utf-8″ ?>
    <!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>


    <html xmlns = "http://www.w3.org/1999/xhtml">

    <head>
    <script src="gas24.js" type="text/javascript"></script>

    <h2> Registration Form </h2>

    <title>
    Javascript Form Validation Homework

    </title>

    </head>

    <body>

    <table border="">
    <form name="validation_form" method="post" onsubmit="return validate()">

    <tr>
    <td>
    <t>Name: <input type="text" name="YourName" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/>
    </td> </tr> </br>
    <tr>
    <td>
    Password: <input type="password" name="YourPassword" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    Re-Type Password:
    <input type="password" name="passwordConfirmed" size="10" maxlength="10"/>
    </td> </tr> </br>
    <tr>
    <td>
    Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male
    <input type="radio" name="FemaleBox" Value="Female"> Female
    </td> </tr> </br>
    <tr>
    <td>
    Comments:
    <input type="text" name="Comments" size="100" maxlength="500" value=""/>
    </td> </tr>
    <tr>
    <td>
    <input type="submit" value="Submit"/>
    </td> </tr>
    </form>



    </table>

    <p></p>



    </body>
    </html>


    The javascript file:
    I've tried two things. This:
    <SCRIPT LANGUAGE="JavaScript">

    function validation()
    {


    var x=document.forms["validation_form"]["YourName"].value;
    if (x==null || x=="")
    {
    alert("First name must be filled out");
    return false;
    }


    }

    And this:

    function validation()

    if ( document.validation_form.YourName.value == "" )
    {

    alert( "Please type your name.");
    valid = false;
    }



    if ( document.validation_form.YourPassword.value =!
    "document.validation_form.Confirm.value" )
    {
    alert ( "Please confirm your password." );
    valid = false;
    }



    I would greatly appreciate it if somebody could tell me what I'm doing wrong.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,996
    Thanks
    79
    Thanked 4,433 Times in 4,398 Posts
    f ( document.validation_form.YourPassword.value =!
    "document.validation_form.Confirm.value"

    No such operator as =!

    It is !=

    Yes, exactly..

    And you need to dump the quotes there. SO:
    Code:
    if ( document.validation_form.YourPassword.value != document.validation_form.Confirm.value )
    Just setting valid=false isn't enough. You must then return valid

    ALso, the first statement in your validation function need to be var valid = true;

    By the by, radio buttons aren't radio buttons unless you give two or more the SAME NAME.

    Yours should probably just be named "gender".
    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! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Form validation of the pattern if ( document.validation_form.YourName.value == "" ) 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. This topic has been covered many times before in this forum.

    A proper name can only contain letters, hyphen, space and apostrophe. Mary-Lou O'Flanaghan-MacDonald

    var x=document.forms["validation_form"]["YourName"].value;
    should be
    var x = document.validation_form.YourName.value;
    or
    document.forms[0].Your_Name.value;
    or using square bracket notation (not needed):-
    var x=document["validation_form"]["YourName"].value;

    if (x==null || x=="")
    The value of a form field can never be null - only "" (blank).

    There is no need to define a variable valid. If the test fails simply return false (and preferably then clear the offending field and refocus on it).

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript">.

    24 may well be insufficient for the maximum number of characters allowed in the email address. The maximum possible is 256. And setting a maximum of 10 characters for the name field is just silly. SirScriptsAlot is longer than that!! Comments field should be a textarea, not a textbox (a single line).


    There's nothing lucky about that. He gambled and got his reward. Sports Commentator BBC Radio London
    Last edited by Philip M; 03-23-2012 at 07:31 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.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript">.
    <script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

    If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).
    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
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by felgall View Post
    <script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

    If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).
    Yes you are correct in pointing out <script type = "text/javascript"> is also long deprecated and if someone knows what they are talking about they should mention it is also deprecated when pointing out that <script language=javascript> is deprecated.

    But I believe, because I haven't actually tested it, that IE v8 and under won't run javascript with <script type="application/javascript">. If that is the case what is the alternative for IE v8 and under?.

    The only I see is <script type = "text/javascript"> and so that caveat should be mentioned when talking about what type attribute to use.
    Last edited by Mishu; 03-24-2012 at 07:21 AM.

  • #6
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    To the OP:

    I have the form up but for some reason I can't get it to validate.
    In your code you have a very obvious mistake.

    Code:
    <form name="validation_form" method="post" onsubmit="return validate()">
    and your function is

    Code:
    function validation()

  • #7
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Philip M View Post
    There is no need to define a variable valid. If the test fails simply return false (and preferably then clear the offending field and refocus on it).
    There's actually a better way than what you are suggesting and the OP is on the right track.

    If the user has made more than one input error, you don't want to tell them the errors one by one which will be annoying to most users. A better approach is to highlight all the errors in one go after submission. At the top of your validation function, set a boolean like dataIsCorrect = true;. Then as you validate each user input, if any is invalid, output an error message to an errors array or append to an errors string and then set dataIsCorrect = false;.

    After all the inputs have been validated check if dataIsCorrect = false. If it is then output the errors array or errors string and highlight the invalif input fields in the form. Then return dataIsCorrect ; at the end of the function.

    If no errors were encountered then dataIsCorrect still equals true from where it was initially set and the form data is sent away. This way, if the user made more than 1 input error they can see them all in 1 go rather than one at a time. You can highlight the invalid inputs with red asterisks or whatever you like.
    Last edited by Mishu; 03-24-2012 at 07:59 AM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,996
    Thanks
    79
    Thanked 4,433 Times in 4,398 Posts
    Or even easier (even using my favorite variable name):
    Code:
    function validateForm(form)
    {
        var oops = "";
        if ( ... validate name field fails ... )
        {
            oops += "\n    You must supply a valid name";
        }
        if ( ... validate email field fails ... )
        {
            oops += "\n    You must supply a valid email";
        }
        ... ditto for other fields ,,,
    
        if ( oops == "" ) return true;
    
        alert("Please correct the following errors:" + oops);
        return false;
    }
    One variable serves both 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.

  • #9
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Old Pedant View Post
    One variable serves both purposes.
    That's very similar to what I posted except you have 2 return statements where I would need only one return statement.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,996
    Thanks
    79
    Thanked 4,433 Times in 4,398 Posts
    Quote Originally Posted by Mishu View Post
    That's very similar to what I posted except you have 2 return statements where I would need only one return statement.
    Yes? And you use two variables where I only use one. Are you one of those that believes that functions should only have one return? Personally, I think that's silly, but if you insist...
    Code:
    function validateForm(form)
    {
        var oops = "";
        if ( ... validate name field fails ... )
        {
            oops += "\n    You must supply a valid name";
        }
        if ( ... validate email field fails ... )
        {
            oops += "\n    You must supply a valid email";
        }
        ... ditto for other fields ,,,
    
        if ( oops != "" ) { alert("Please correct the following errors:" + oops); }
    
        return oops == "";
    }
    I agree with you re highlighting inputs in red or some such, but many people don't think that's worth the effort.

    The other thing I was showing there is how you can build the error string so it's actually pretty readable even with just an alert. The spaces after the \n characters make it look almost like a bulleted list.
    Last edited by Old Pedant; 03-25-2012 at 06:21 AM.
    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
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Old Pedant View Post
    Are you one of those that believes that functions should only have one return?
    I like to use only 1 unless I must have more. That is easier for me.

  • #12
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Old Pedant View Post
    I agree with you re highlighting inputs in red or some such, but many people don't think that's worth the effort.
    I don't normally highlight the inputs in red. I was suggesting the option only.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Mishu View Post
    There's actually a better way than what you are suggesting and the OP is on the right track.

    If the user has made more than one input error, you don't want to tell them the errors one by one which will be annoying to most users.
    I do not agree. IMO it is better to highlight the errors one at a time.

    Mishu - your tone and other factors, such as joined 23/3/2012 but 28 posts already, and not providing any contact details in your profile, suggests to me that are you are yet another incarnation of a previously banned member, setting up a new identity in advance of being chucked out yet again.

    Edit: I now see that you have been chucked out again (as webdev1958).
    Last edited by Philip M; 03-25-2012 at 12:45 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.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by felgall View Post
    <script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

    If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).
    Well, there are plenty of people still using IE8 or below. And plenty of 15-year-old code floating about as well.

    I expect that <script type = "text/javascript"> will eventually be removed - in say 25 years. <script language=javascript> will probably be removed in 10 years or so. My understanding is that deprecated means disapproved of but still permissible, while obsolete means forbidden and no longer supported at all. So to be precise <script type = "text/javascript"> is deprecated but not obsolete.
    Last edited by Philip M; 03-25-2012 at 05:36 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.

  • #15
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Philip M View Post
    . So to be precise <script type = "text/javascript"> is deprecated but not obsolete.
    That is correct, but since so is language="javascript" then what's wrong if someone uses it since it still works like type = "text/javascript"


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