Page 1 of 1

javascript form validation

Posted: Thu Jul 29, 2010 3:44 am
by me666
hi guys, i've got a form validation java script that i found online to make sue fields are typed in before going onto the next field, this works fine but myproblem is that if i try to fill in the form but miss the forname field leaving it blank and pressing tab to continue onto the surname field it gives the alert saying that you need to fill in the forenames field, great, but then as i had pressed tab it then gives the alert to fill in the surnmae field, and then loops between them as i have used the focus tool to make them focus on the field they have missed. what i want is for it to set a variable or something and when that is set the other validation parts do not continue. I hope this makes sence to you :)
here is the code i have at current.

Code: Select all

<script type="text/javascript">
<!--
function validate_forenames ( )
{
	valid = true;

        if ( document.part1.forenames.value == "Forenames" )
        {
                alert ( "Please fill in the your Forenames." );
                valid = false;
				var box = document.getElementById("forenames"); 
				box.focus();
        }

        return valid;
}
function validate_surname ( )
{
	valid = true;

        if ( document.part1.surname.value == "Surname" )
        {
                alert ( "Please fill in the your Surname." );
                valid = false;
				var box = document.getElementById("surname"); 
				box.focus();
        }

        return valid;
}
//-->
</script>

<form method="POST">
<input name="forenames" type="text" id="forenames" onblur="if(this.value=='') this.value='Forenames'; return validate_required ( );" onFocus="if(this.value=='Forenames') this.value='';" value="Forenames">
          <br>
          <input name="surname" length="40" id="surname" value="Surname" onblur="if(this.value=='') this.value='Surname';  return validate_surname ( );" onFocus="if(this.value=='Surname') this.value='';">
</form>
thanks guys :)

Re: javascript form validation

Posted: Thu Jul 29, 2010 2:35 pm
by Jade
You shouldn't be using the onFocus to check for errors. Instead you should check all the validation prior to when they submit the form, otherwise you'll end up with problems like you described.

Code: Select all

<script type="text/javascript">
function validateInput(form)
{
       if (!form.getElementById("username"))
       {
           alert("You must enter a username.");
          form.getElementById("username").focus();
           return false;
       }

       if (!form.getElementById("pass"))
       {
           alert("You must enter a password.");
          form.getElementById("pass").focus();
           return false;
       }

      return true; //no errors found
}
</script>
<form action="#" method="post" onSubmit="validateInput(this)">
<input type="text" name="username" id="username" /><br/>
<input type="text" name="pass" id="pass" /><br/>
<input type="submit" name="submit" value="Press Me" />
</form>

Re: javascript form validation

Posted: Sat Jul 31, 2010 8:03 am
by me666
excelent, i had a feeling i may need to do it this way, thanks 4 that :)

Re: javascript form validation

Posted: Sun Aug 08, 2010 12:50 am
by Razorback64
You could do it by looking into all characters of the text to validate by charAt() method of string object. Check if it is a digit or a hyphen ("-"). Remember that Javascript does not have a char data type; charAt() returns a string of length 1.

You could also do it by using indexOf() and lastIndexOf() methods of String object. if indexOf("-") and lastIndexOf("-") returns the same value, and this value is greater than or equal 0 (none negative), then this string has a single "-" character inside. split this string to get two substrings around "-", and validate each substring to be all digits.