Easiest Form Validation With Javascript?

[chunk1978]

hi everyone,

this may seem like a lazy post, but it's not... i've been searching for a while and everything i've read seems different than others (and none of it works either, for me anyway)... in my form i already have a CheckForm Function under Javascript to display an alert if the fields were left blank, but i would also like to add to this existing code, in the same function (if possible), to alert if fields are containing illegal characters.

1) for the Name, i would like to allow only letters.
2) for the Email, i would like to allow only an email address with "@" and "."
3) for the ZipCode, i would like to allow only numbers.
4) for the Telephone, i would like to allow only numbers along with "(" and ")" and "-" and "+"

 
function checkform ( form )
    {
    if (form.name.value == "") {
    alert( "Please enter your NAME." );
    form.name.focus();
    return false ;}
 
      if (form.email.value == "") {
    alert( "Please enter your EMAIL ADDRESS." );
    form.email.focus();
    return false ;}
 
    if (form.postalzip.value == "") {
    alert( "Please enter your ZIP CODE." );
    form.postalzip.focus();
    return false ;}
 
    if (form.telephone.value == "") {
    alert( "Please enter your TELEPHONE NUMBER." );
    form.telephone.focus();
    return false ;}
 
    return true ;
    }
 
 

also, is it a security risk to allow "(" and ")" and "-" and "+" with the telephone field, or any other field? does allow these specific characters allow for malicious code to be entered that would kill the server when the form is submitted for processing?

thanks

[acoder]

1) for the Name, i would like to allow only letters.
2) for the Email, i would like to allow only an email address with "@" and "."
3) for the ZipCode, i would like to allow only numbers.
4) for the Telephone, i would like to allow only numbers along with "(" and ")" and "-" and "+"

If you know how to use regular expressions, you can match the strings with a regular expression, e.g. numbers only could be

/^\d+$/

See here for more info.

For the name, try using an else after the code for checking if name is empty, e.g.

if (form.name.value == "") {
 alert( "Please enter your NAME." );
 form.name.focus();
 return false;
} else if (!form.name.value.match(regexp) { // regexp is your regular expression for letters only
// error message
 

[AricC]

1) for the Name, i would like to allow only letters.
2) for the Email, i would like to allow only an email address with "@" and "."
3) for the ZipCode, i would like to allow only numbers.
4) for the Telephone, i would like to allow only numbers along with "(" and ")" and "-" and "+"

You should reconsider after you get the hang of doing some extra validation. For name you should only allow letters + spaces, for email you should allow more than just @ and "." what about "-" etc. For the email validation maybe a few others you should do a google search there are plenty of examples of prewritten JS to validate email addy's (no sense re-inventing the wheel)

[chunk1978]

i've never used regular expressions before, and after spending 3+ trying to make it work i've decided that maybe it's not the right choice for me... my learning curve isn't so hot i guess ;-)...

i was thinking of something more literal, something my poor brain could manage to understand... something like this (if it's possible):

 
var ATLEASTTHESECHARACTERS = "@", ".";
if (form.email.value == "" || form.email.value !=('ATLEASTTHESECHARACTERS'));{
    alert( "Please enter a valid EMAIL ADDRESS." );
    form.email.focus();
    return false ;}
 
var ATLEASTTHESECHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
if (form.name.value == "" || form.name.value !=('ATLEASTTHESECHARACTERS')) {
    alert( "Please enter a valid EMAIL ADDRESS." );
    form.email.focus();
    return false ;}
 
 

is there anything super simple like that which i could implement into my existing code?

[r035198x]

i've never used regular expressions before, and after spending 3+ trying to make it work i've decided that maybe it's not the right choice for me... my learning curve isn't so hot i guess ;-)...

i was thinking of something more literal, something my poor brain could manage to understand... something like this (if it's possible):

 
var ATLEASTTHESECHARACTERS = "@", ".";
if (form.email.value == "" || form.email.value !=('ATLEASTTHESECHARACTERS'));{
    alert( "Please enter a valid EMAIL ADDRESS." );
    form.email.focus();
    return false ;}
 
var ATLEASTTHESECHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
if (form.name.value == "" || form.name.value !=('ATLEASTTHESECHARACTERS')) {
    alert( "Please enter a valid EMAIL ADDRESS." );
    form.email.focus();
    return false ;}
 
 

is there anything super simple like that which i could implement into my existing code?

Get a tutorial on regular expressions and read it. The rest of your Javascript validations will become an overly simplified task after that.

[chunk1978]

Get a tutorial on regular expressions and read it. The rest of your Javascript validations will become an overly simplified task after that.

ok so i've done a lot of homework on regular expressions... but they seem temperamental with my browser (Safari 2.0.4)... sometimes they work, sometimes they don't (??)... so there must be a flaw in the code... this is what i have:

 
function checkform ( form )
    {
    if (!/[a-zA-Z]+$/.test(form.name.value)) {
    alert( "Please enter a valid NAME." );
    form.name.focus();
    return false ;}
 
    if (!/[\w\s]+$/.test(form.addressline1.value)) {
    alert( "Please enter a valid ADDRESS." );
    form.addressline1.focus();
    return false ;}
 
    if (!/[a-zA-Z]+$/.test(form.city.value)) {
    alert( "Please enter a valid CITY." );
    form.city.focus();
    return false ;}
 
    if (!/[a-zA-Z]+$/.test(form.provincestate.value)) {
    alert( "Please enter a valid PROVINCE/STATE." );
    form.provincestate.focus();
    return false ;}
 
    if (!/[\w\s]+$/.test(form.postalzip.value)) {
    alert( "Please enter a valid POSTAL/ZIP CODE." );
    form.postalzip.focus();
    return false ;}
 
 

[chunk1978]

ok so i've done a lot of homework on regular expressions... but they seem temperamental with my browser (Safari 2.0.4)... sometimes they work, sometimes they don't (??)... so there must be a flaw in the code... this is what i have:

 
function checkform ( form )
    {
    if (!/[a-zA-Z]+$/.test(form.name.value)) {
    alert( "Please enter a valid NAME." );
    form.name.focus();
    return false ;}
 
    if (!/[\w\s]+$/.test(form.addressline1.value)) {
    alert( "Please enter a valid ADDRESS." );
    form.addressline1.focus();
    return false ;}
 
    if (!/[a-zA-Z]+$/.test(form.city.value)) {
    alert( "Please enter a valid CITY." );
    form.city.focus();
    return false ;}
 
    if (!/[a-zA-Z]+$/.test(form.provincestate.value)) {
    alert( "Please enter a valid PROVINCE/STATE." );
    form.provincestate.focus();
    return false ;}
 
    if (!/[\w\s]+$/.test(form.postalzip.value)) {
    alert( "Please enter a valid POSTAL/ZIP CODE." );
    form.postalzip.focus();
    return false ;}
 
 

so i managed to figure out what exactly is happening... based on the above code, in the "name" text area i can enter a valid name (IE "Steve Jobs"), since my regular expressions is only suppose to allow for alphabetic strings.however, i can also enter "1Steve 2Jobs" as well as "@$^#&Steve 8374Jobs"

so how do i fix this coding error?

[r035198x]

so i managed to figure out what exactly is happening... based on the above code, in the "name" text area i can enter a valid name (IE "Steve Jobs"), since my regular expressions is only suppose to allow for alphabetic strings.however, i can also enter "1Steve 2Jobs" as well as "@$^#&Steve 8374Jobs"

so how do i fix this coding error?

Perhaps your expressions are wrong. Try these onKeyPress of the input box

[HTML]function lettersOnly(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
function numeralsOnly(evt) { //integers only
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

function floatingPoint(evt) { //numerical
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {
return false;
}
return true;
}[/HTML]