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

    Unhappy Validation script

    Hello everyone,

    So I am practicing on my HTML5/JavaScript skills, but I am a bit stumped and would like some input. I am using a JavaScript that I wrote and used in the past, that makes sure that all the text boxes are filled before proceeding to the next page. The validating works fine, but there is one error, which I have never encountered before. I notice that when the text boxes are empty, an alert box appears notifying the user to fill out all the required fields, but it continues to the next page, instead of allowing the user to correct the problem, then continue accordingly. Here is my code:
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function validate(){
    	var valid = true;
    	if (document.regpage.usrNm.value==""||document.regpage.passWrd.value==""||document.regpage.cnfrmPsswrd.value==""||document.regpage.state.value==""||document.regpage.zip.value=="")
    	    valid = false;
    	if (valid == false)
    		alert("You must fill out ALL required fields!");
    	else
    		document.regpage.submit();}
    </script>
    
    <link rel="stylesheet" type="text/css" href="mainpage.css" />
    </head>
    
    <body>
    
    <div class="logIn">
    <form name="regpage" action="reg.php" method="post">
    <p>Easy sign-up! Please fill out all the required fields to get started!
    </p>
    User Name<font color="red">*</font>:
    <input type="text" name="usrNm" value="" /><br />
    Password<font color="red">*</font>:
    <input type="text" name="passWrd" value="" /><br />
    Confirm Password<font color="red">*</font>:
    <input type="text" name="cnfrmPsswrd" value="" /><br />
    State<font color="red">*</font>:
    <input type="text" name="state" value="" /><br />
    Zip Code<font color="red">*</font>:
    <input type="text" name="zip" value="" /><br />
    <input type="submit" value="Register" onclick="validate()" />
    </form>
    </div>
    
    </body>
    </html>
    Any help would be appreciated. As many of you experienced programmers may notice; I am somewhat new to web development and programming.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    The quick and dirty way:

    Change <input type="submit"> to <input type="button">.

    So long as it is a submit button, then it will submit the <form>!

    ***********

    Better way. Get rid of the onclick on the submit button completely.

    Change the <form> to:

    <form name="regpage" action="reg.php" method="post" onsubmit="return validate(this);">

    Change your JS to:
    Code:
    function validate(form)
    {
        if (    form.usrNm.value==""
             || form.passWrd.value==""
             || form.cnfrmPsswrd.value==""
             || forme.state.value==""
             || form.zip.value ==""
        ) {
            alert("You must fill out ALL required fields!");
            return false;
        }
        return true;
    }
    But having said all the above...

    WHy bother? That validation is essentially useless.

    If the user enters a SINGLE SPACE (or any other character...or any other completely illogical value) for each field, it will pass validation.

    If you are going to validate, then *REALLY* validate. Don't both with virtually useless code.

    There are literally HUNDREDS (if not thousands) of posts in this very forum relating to form validation. Go look around and find some *good* validation.

    p.s.: And I hope you are *ALSO* validating the <form> on your PHP page! Obviously form validation in JavaScript is useless if somebody turns off JavaScript. Or if a hacker hits your site without even using your code.
    Last edited by Old Pedant; 01-25-2013 at 01:24 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.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thank you for you help. Being new to JavaScript I can use all the advice and knowledge that I can use. I will definitely go through different posts on this forum to learn more.

    I was going to use the reg.php to connect to a database I created, and transfer the information from the text boxes in the reg.html file, to the database. I suppose that you're suggesting to write a validation script on the reg.php page as well to make more secure to attacks and an actual effective validation.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Quote Originally Posted by kiefersmokerlan View Post
    I was going to use the reg.php to connect to a database I created, and transfer the information from the text boxes in the reg.html file, to the database. I suppose that you're suggesting to write a validation script on the reg.php page as well to make more secure to attacks and an actual effective validation.
    ** EXACTLY! **

    It's really very important. Trust me, SOMEDAY you will be hit by hackers who will simply look at your <form> code and start submitting usernames and passwords as fast as they can "spoofing" your site. They won't even use your actual <form>, much less your JS code.
    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.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Also get rid of the alert and update the error message in the page itself instead - most browsers now either allow alerts to be turned off or even provide an option in the alert to turn off JavaScript.
    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
    •