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 11 of 11
  1. #1
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts

    Basic form validation question

    New to JS, and having issues with something very basic. The <p> elements are hidden initially, and I want them to display only if the form validation error occurs.

    The error runs on page load, because it doesn't fit the format initially (since its blank). Anyway to prevent this, or is my logic way off in writing the code this way?

    Code:
    <form id="form_search_sku" action="">
      <input id="search_sku" name="search_sku" type="text" /><br /><br />
      <div id="errors">
        <p id="sku-error-blank">You need to enter a value in the search field to proceed.</p>
        <p id="sku-error-format">Your search is in the wrong format. Please view the instructions above.</p>
      </div>
      <input id="submit" type="submit" name="submit" value="Search" />
    </form>

    Code:
    function error_check()
    {
    	var search_for_sku = document.getElementById("search_sku");
    	var sku_format = /^S\d{5}/;
    	var sku_format_error = document.getElementById("sku-error-format");
    	
    	if (search_for_sku.value != sku_format)
    	{
    		sku_format_error.style.display = 'block';
    	}
    	
    }
    Registration of event handler
    Code:
    document.getElementById("submit").onclick = error_check();
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    this causes it to run when pge loads ...
    document.getElementById("submit").onclick = error_check();
    should be
    document.getElementById("submit").onclick = error_check;

    your form should look more like this ...

    <form id="form_search_sku" action="" onsubmit="return error_check()">

    and your submit button

    <input type="submit" value="Search" />

    now you don't need

    document.getElementById("submit").onclick = error_check;

    error_check needs to return false if there is an error

    and sku-error-blank
    and sku_format_error
    display properties need to
    be set to none before
    checking for errors
    Last edited by DaveyErwin; 05-30-2012 at 09:43 PM.

  • Users who have thanked DaveyErwin for this post:

    optimus203 (05-30-2012)

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Thanks Davey. That fixed that issue. Now my format search (var sku_format - to check input from user is in proper format) is not working. Never returning true. Any ideas?

    Code:
    function error_check()
    {
    	var sku_format = /\d{4}/;
    	var search_for_sku = document.getElementById("search_sku");
    	var sku_blank_error = document.getElementById("sku-error-blank");
    	var sku_format_error = document.getElementById("sku-error-format");
    	
    	if (search_for_sku.value == '')
    	{
    		sku_format_error.style.display = 'none';
    		sku_blank_error.style.display = 'block';
    		return false;
    	}
    	if (search_for_sku.value != sku_format)
    	{
    		sku_blank_error.style.display = 'none';
    		sku_format_error.style.display = 'block';
    		return false;
    	}
    	else
    	{
    		return true;
    	}
    }
    Code:
    <form id="form_search_sku" action="">
            <input id="search_sku" name="search_sku" type="text" /><br /><br />
            <div id="errors">
                    <p id="sku-error-blank">You need to enter a value in the search field to proceed.</p>
                    <p id="sku-error-format">Your search is in the wrong format. Please view the instructions above.</p>
            </div>
            <input id="submit" type="submit" name="submit" value="Search" />
    </form>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    if (search_for_sku.value != sku_format)

    should be

    if (sku_format.test(search_for_sku.value))

    or

    if (search_for_sku.value.search(sku_format))
    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.

  • Users who have thanked felgall for this post:

    optimus203 (05-30-2012)

  • #5
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Nice felgall. Thanks for the fix. Any quick explanation why why comparison option does not work?

    Plus, I'm not quite sure why if (search_for_sku.value.search(sku_format)) is working. From my reading of this statement, search_for_sku is searching for sku_format within its variable. So if the format is correct, then the body of this statement should run. But it only runs when the format match is incorrect. Don't get that.
    Last edited by optimus203; 05-30-2012 at 10:24 PM.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Simple answer: Testing for == means exactly what it says: The two sides MUST BE THE SAME.

    == does *NOT* apply regular expression pattern matching rules. It simply checks for the two values to be the same. The "value" of your regular expression will be the string "\d{4}" and clearly that won't be the same unless the user actually types in "\d{4}".

    Although you can use search, it's semantically confusing to do so.

    search returns the position of the first substring match in a regular expression search.

    So if your first "substring match" is position zero (that is, if it finds the match at the start of what the user enters) the returned value is zero. And then when you do if ( 0 ) ... that means the if condition is *NOT* met and so you see the results you are seeing.

    I think for one of the very few times I've seen, Felgall goofed in his answer. If you are going to use search, you have to actually do
    Code:
    if ( search_for_sku.value.search(sku_format) >= 0 )
    The test method, on the other hand, simply return true or false, so it is immediately returning the condition value you want. I would always use test for this.
    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.

  • Users who have thanked Old Pedant for this post:

    optimus203 (05-31-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    By the way, I think your regular expression is likely wrong.
    Code:
    var sku_format = /\d{4}/;
    Even using the test method, all that does is make sure that there are 4 digits in a row SOMEWHERE in the tested value!

    So the user could enter yowser! 1 not yet 23 still not yet 4567 now! and because of the 4567 the test would succeed.

    I think you need to use
    Code:
    var sku_format = /^\d{4}$/;
    The ^ means "start of the value" and $ means "end of the value", so ONLY an answer with 4 digits alone is accepted.
    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.

  • #8
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Thanks for the reply pendant and the clarification on the == comparison question I had.

    I did try your suggestion with using the test method, but couldn't get it to work. I have the following code (commented bit is the working example that utilizes search method):
    Code:
    function error_check_sku()
    {
    	//
    	// Search SKU - error handling
    	//
    	var sku_format = /^\d{4}$/; // 4 digits
    	var search_for_sku = document.getElementById("search_sku");
    	var sku_blank_error = document.getElementById("sku-error-blank");
    	var sku_format_error = document.getElementById("sku-error-format");
    	
    	if (search_for_sku.value == '')
    	{
    		sku_format_error.style.display = 'none';
    		sku_blank_error.style.display = 'block';
    		return false;
    	}
    	/*
    	if (search_for_sku.value.search(sku_format))
    	{
    		sku_blank_error.style.display = 'none';
    		sku_format_error.style.display = 'block';
    		return false;
    	}*/
    	if (sku_format.test(search_for_sku.value))
    	{
    		sku_blank_error.style.display = 'none';
    		sku_format_error.style.display = 'block';
    		return false;
    	}
    	else
    	{
    		return true;
    	}
    }
    Also, for your var sku_format = /^\d{4}$/; suggestion - for some reason the initial setup I had of just /\d{4}/ was producing the same result - only returning true if the string was 4 consecutive digits. I tested using your suggestion that 4 consecutive digits anywhere in the input string would be accepted, but it wasn't. Don't know why this is as your example and suggestion seems to make the most sense.
    Last edited by optimus203; 05-31-2012 at 03:03 AM.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #9
    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 optimus203 View Post
    if (search_for_sku.value.search(sku_format))
    Should be

    if (sku_format.test(search_for_sku.value)) {

    The search() method searches a string for a specified value, or regular expression, and returns the position of the match, or -1 if not found. The test() method tests if the given string matches the regex pattern, and returns true if matching, false if not. You should use the test() method.

    Both Old Pedant and felgall have pointed this out already.

    Quizmaster: Which insect gets its name from the ancient superstition that they crawled into peopls' ears when they were asleep?
    Contestant: Ants
    Last edited by Philip M; 05-31-2012 at 08:32 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.

  • #10
    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 Old Pedant View Post
    I think for one of the very few times I've seen, Felgall goofed in his answer.
    I was concentrating on the fact that search is the equivalent method and forgot that it needed the >= 0 as well because it isn't an exact equivalent. Probably because in those situations I always use test()
    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
    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
    I was concentrating on the fact that search is the equivalent method and forgot that it needed the >= 0 as well because it isn't an exact equivalent. Probably because in those situations I always use test()
    It is good to know that felgall is human as well - the only people who never make a mistake are those who never do any work.

    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.


  •  

    Posting Permissions

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