Validate form for blank entries & number entries

[Floodster]

Hi,
First of all I'm no expert at JAVASCRIPT!!!

I have a form that requires 3 input fields to be entered before the form can be submitted to the database. In the database the first 2 fields are set to VARCHAR & the third is set to INT.
I have this below code which validates to make sure an entry has been entered but if someone enters text in the 3rd field it still validates but then I get an error when trying to insert into my database.

function validate(field,alerttxt)
{
with (field)
{

if (value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_member(form1)
{
with (form1)
{
	if (validate(txtName,"Name cannot be blank")==false)
  	{txtName.focus();return false}
	
	if (validate(txtEmail,"Email cannot be blank")==false)
  	{txtEmail.focus();return false}
	
	if (validate(txtHcap,"Handicap cannot be blank")==false)
  	{txtHcap.focus();return false}
	
}
}

How can I implement a check into this existing code to ensure that a number is being entered in the 3rd field??

Thanks.

 

[cLFlaVA]

For this, I would utilize two functions:

function validateText( field, alertText ) {
    with (field) {
        if (value=="") {
            alert(alerttxt);
            return false;
        } else {
            return true;
       }
    }
}

function validateNumber( field, alertText ) {
    with (field) {
        if (isNaN( value )) {
            alert(alerttxt);
            return false;
        } else {
            return true;
       }
    }
}

you would then call the validateNumber function for any numeric field you'd like to validate.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Floodster]

cLFlaVA,
this is great, how do i call 2 functions from one form. I currently have this code;

<form action="/navigation/links.asp" method="post" name="form1" id="form1" onsubmit="return validate_member(form1)">

cheers.

 

[theniteowl]

cLfLaVA beat me to it but here is my rendition.
I separated all tests into functions.
I added an extra function to test real numbers that may or may not contain a decimal as I was not certain what form the handicap values would take.
I also included an email test.

function validate_member(form1)
{
  with (form1)
  {
    if (!notblank(txtName.value)) {
      alert("Name cannot be blank");
      txtName.focus();
      return false;
    }
    if (!email(txtEmail.value)) {
      alert("Must enter a valid email address");
      txtEmail.focus();
      return false;
    }
    
    if (!any_whole_number(txtHcap.value)) {
      alert("Handicap cannot be blank");
      txtHcap.focus();
      return false;
    }  
  }
  return true;
}

function notblank(value) {
  return (value != "")?true:false;
}

function any_real_number_with_or_without_decimal(value) {
  var re = /^-?\d+(\.\d+)?$/;
  return re.test(value);
}

function any_whole_number(value) {
  var re = /^-?\d+$/;
  return re.test(value);
}

function email(value) {
  //Requires minimum two characters before @, two chars after and two chars after.
  var re = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/;
  return re.test(value);
}

Google, you're my hero!

 

[Floodster]

Niteowl,
you managed to answer both my questions.
thanks to both of you.

 

[Floodster]

NiteOwl,
I have another question, if I want to put some tick boxes on my form & give the user a choice of ticking all or one of them how would I implement an IF into your code??
thanks.

 

[theniteowl]

The simplest way is like this:
Assume you have 4 checkboxes named chk1-chk4.
I first set the variable chkPass to false then test each checkbox. If any of them are checked then chkPass gets set to true, otherwise it remains false and when it hits the if statement below it will cause an error message.

    var chkPass = false;
    if (chk1.checked ) chkPass = true;
    if (chk2.checked ) chkPass = true;
    if (chk3.checked ) chkPass = true;
    if (chk4.checked ) chkPass = true;

    if (!chkPass) {
      alert("At least one checkbox must be checked.");
      return false;
    }

At this point you have to ask yourself a few questions though.
If the page is going to have more than just a few required fields then it is a good idea to not end your function at the first error it finds. For instance if you had 10 fields on the page and the user made mistakes in 6 of them they would only get an error on the first, they would correct it and hit submit again only to get another error which they fix and submit..... It would get frustrating.
The better thing to do in that case is to not do a return false as soon as a field fails. Instead, use a variable to track if anything has failed like I did for the checkboxes and at the end of your code use an if statement to test if any errors have occured and return true or false accordingly.
Also, instead of alerting out each error individually, use a variable to store the error message in. Each time an error occurs add that error message onto the variable and at the end if there were errors you send one alert with all things that have to be fixed.

When you get more comfortable with the javascript you can set visual cues for which fields have errors by changing the color of the text beside each field with an error or showing some other on-page indicator.

If you use the method I describe above and you still want to set the focus to the field with the error then you will probably want to reverse the order fields are tested so you are testing from the bottom up. That way focus will get set to the first field on the page that has an error instead of the last.



Google, you're my hero!