...

View Full Version : Basic form validation question



optimus203
05-30-2012, 10:02 PM
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?



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





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


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

DaveyErwin
05-30-2012, 10:31 PM
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

optimus203
05-30-2012, 11:03 PM
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?



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;
}
}




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

felgall
05-30-2012, 11:11 PM
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))

optimus203
05-30-2012, 11:15 PM
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.

Old Pedant
05-31-2012, 01:40 AM
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

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.

Old Pedant
05-31-2012, 01:43 AM
By the way, I think your regular expression is likely wrong.


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

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.

optimus203
05-31-2012, 04:00 AM
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):


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.

Philip M
05-31-2012, 08:59 AM
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

felgall
05-31-2012, 10:39 AM
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()

Philip M
05-31-2012, 02:05 PM
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. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum