...

View Full Version : Form Validation - Textbox Color Change



NumBa1Stunna516
10-19-2005, 09:22 PM
Okay I have searched google for hours literally without luck so hopefully someone here can help.

What I am trying to do is when someone submits the form if there are empty textboxes change the textbox's style from class="input" to class="inputreq". Someone please help, the formname is "signup" and the textboxes are "domain" and "username". Please help. Thanks.

Brandoe85
10-19-2005, 11:24 PM
Just change the classname:

document.signup.username.className = "inputreq";

Good luck

EDIT: Just for example:


<html>
<head>
<style type="text/css">
.input
{
background-color: white;
}
.inputreq
{
background-color: red;
}
</style>
<script type="text/javascript">
function Valid(oForm)
{
var AllElms = new Array();

if(oForm.domain.value == "")
{
AllElms[AllElms.length] = oForm.domain;
}

if(oForm.username.value == "")
{
AllElms[AllElms.length] = oForm.username;
}

if(AllElms.length > 0)
{
for(var i = 0; i < AllElms.length; i++)
{
AllElms[i].className = "inputreq";
AllElms[i].select();
}

return false;
}

}
</script>
</head>
<body>
<form name="signup" onsubmit="return Valid(this);">
<input type="text" name="domain" class="input"><br>
<input type="text" name="username" class="input"><br>
<input type="submit">
</form>
</body>
</html>

NumBa1Stunna516
10-20-2005, 02:33 AM
Thanks a lot, I got it working.



function checkform_signup(frm) {
if (frm.domain.value.length == 0) {
document.signup.domain.className = "inputreq";
return false;
}
return true;
}

NumBa1Stunna516
10-20-2005, 05:47 PM
Okay I have another problem with it. Brandoe85, your sample form has the same problem.



<html>
<head>
<style type="text/css">
.input
{
background-color: white;
}
.inputreq
{
background-color: red;
}
</style>
<script type="text/javascript">
function Valid(oForm)
{
var AllElms = new Array();

if(oForm.domain.value == "")
{
AllElms[AllElms.length] = oForm.domain;
}

if(oForm.username.value == "")
{
AllElms[AllElms.length] = oForm.username;
}

if(AllElms.length > 0)
{
for(var i = 0; i < AllElms.length; i++)
{
AllElms[i].className = "inputreq";
AllElms[i].select();
}

return false;
}

}
</script>
</head>
<body>
<form name="signup" onsubmit="return Valid(this);">
<input type="text" name="domain" class="input"><br>
<input type="text" name="username" class="input"><br>
<input type="submit">
</form>
</body>
</html>


If the user does not enter either field and hits submit both the fields will be highlighted. After both have been highlighted, the user fills in ONE of the two fields and hits submit again. It still has the first one highlighted like its empty when its not. How can this be fixed?

Brandoe85
10-20-2005, 08:27 PM
Try this:


<html>
<head>
<style type="text/css">
.input
{
background-color: white;
}
.inputreq
{
background-color: red;
}
</style>
<script type="text/javascript">
function Valid(oForm)
{
var AllElms = new Array();
var ValidElms = new Array();

if(oForm.domain.value == "")
{
AllElms[AllElms.length] = oForm.domain;
}
else ValidElms[ValidElms.length] = oForm.domain;


if(oForm.username.value == "")
{
AllElms[AllElms.length] = oForm.username;
}
else ValidElms[ValidElms.length] = oForm.username;

if(ValidElms.length > 0)
{
for(var t = 0; t < ValidElms.length; t++) ValidElms[t].className = "input";
}

if(AllElms.length > 0)
{
for(var i = 0; i < AllElms.length; i++)
{
AllElms[i].className = "inputreq";
AllElms[i].select();
}

return false;
}
}
</script>
</head>
<body>
<form name="signup" onsubmit="return Valid(this);">
<input type="text" name="domain" class="input"><br>
<input type="text" name="username" class="input"><br>
<input type="submit">
</form>
</body>
</html>


Good luck

NumBa1Stunna516
10-20-2005, 09:39 PM
Hey could you tell me how I can do that with this script.



function checkform_signup() {
error = '0';
if (signup.domain.value.length == 0) {
document.signup.domain.className = "inputreq";
error= '1';
}
if (signup.username.value.length == 0) {
document.signup.username.className = "inputreq";
error = '1';
}
if (signup.password.value.length == 0) {
document.signup.password.className = "inputreq";
error = '1';
}
if (signup.confirmpassword.value.length == 0) {
document.signup.confirmpassword.className = "inputreq";
error = '1';
}
if (signup.email.value.length == 0) {
document.signup.email.className = "inputreq";
error = '1';
}
if (signup.firstname.value.length == 0) {
document.signup.firstname.className = "inputreq";
error = '1';
}
if (signup.lastname.value.length == 0) {
document.signup.lastname.className = "inputreq";
error = '1';
}
if (signup.address.value.length == 0) {
document.signup.address.className = "inputreq";
error = '1';
}
if (signup.city.value.length == 0) {
document.signup.city.className = "inputreq";
error = '1';
}
if (signup.state.value.length == 0) {
document.signup.state.className = "inputreq";
error = '1';
}
if (signup.zip.value.length == 0) {
document.signup.zip.className = "inputreq";
error = '1';
}

if(error == '1'){
alert("Please correct all fields highlighted in red.")
return false;
}

if(document.signup.password.value != document.signup.confirmpassword.value) {
document.signup.password.className = "inputreq";
document.signup.confirmpassword.className = "inputreq";
alert('Your Passwords do not match')
return false;
}
return true;
}

Brandoe85
10-20-2005, 11:29 PM
Try this:


<script type="text/javascript">

function checkform_signup(oForm)
{
var ErrorElms = new Array();
var ValidElms = new Array();

if(oForm.domain.value.length == 0) ErrorElms[ErrorElms.length] = oForm.domain;
else ValidElms[ValidElms.length] = oForm.domain;

if(oForm.username.value.length == 0) ErrorElms[ErrorElms.length] = oForm.username;
else ValidElms[ValidElms.length] = oForm.username;

if(oForm.password.value.length == 0) ErrorElms[ErrorElms.length] = oForm.password;
else ValidElms[ValidElms.length] = oForm.password;

if(oForm.confirmpassword.value.length == 0) ErrorElms[ErrorElms.length] = oForm.confirmpassword;
else ValidElms[ValidElms.length] = oForm.confirmpassword;

if(oForm.email.value.length == 0) ErrorElms[ErrorElms.length] = oForm.email;
else ValidElms[ValidElms.length] = oForm.email;

if(oForm.firstname.value.length == 0) ErrorElms[ErrorElms.length] = oForm.firstname;
else ValidElms[ValidElms.length] = oForm.firstname;

if(oForm.lastname.value.length == 0) ErrorElms[ErrorElms.length] = oForm.lastname;
else ValidElms[ValidElms.length] = oForm.lastname;

if(oForm.address.value.length == 0) ErrorElms[ErrorElms.length] = oForm.address;
else ValidElms[ValidElms.length] = oForm.address;

if(oForm.city.value.length == 0) ErrorElms[ErrorElms.length] = oForm.city;
else ValidElms[ValidElms.length] = oForm.city;

if(oForm.state.value.length == 0) ErrorElms[ErrorElms.length] = oForm.state;
else ValidElms[ValidElms.length] = oForm.state;

if(oForm.zip.value.length == 0) ErrorElms[ErrorElms.length] = oForm.zip;
else ValidElms[ValidElms.length] = oForm.zip;

if(ValidElms.length > 0)
{
for(var j = 0; j < ValidElms.length; j++) ValidElms[j].className = "input";
}

if(ErrorElms.length > 0)
{
for(var i = 0; i < ErrorElms.length; i++)
{
ErrorElms[i].className = "inputreq";
ErrorElms[i].select();
}

alert("Please correct all fields highlighted in red.");
return false;
}

}

</script>
.....
<form onsubmit="return checkform_signup(this);">



Good luck

NumBa1Stunna516
10-21-2005, 12:27 AM
Everything is perfect, thanks Brandoe85!

Pyth007
10-21-2005, 02:24 PM
You might be able to get by with a loop too. Just use this in place of all of your if-statements. This assumes that your form has only required text boxes; make additional checks if there are optional text boxes:


var myTxtBoxes = document.getElementsByTagName('input');
for (var counter=0; counter<myTxtBoxes.length; counter++)
{
if (myTxtBoxes[counter].type=='text')
{
if (myTxtBoxes[counter].value.length==0)
ErrorElms[ErrorElms.length]=myTxtBoxes[counter].name
else
ValidElms[ValidElms.length]=myTxtBoxes[counter].name;
}
}

Dénes
02-09-2012, 11:38 AM
Hey!
And what is the way to include also <select> tags?
It got the following code, but don't know why the <select> tag doesn't go the same way as the <input> tag does. Both got the same starting value...

Thank you for your answers.



<html>
<head>

<style type="text/css">

.text { }

.text1 { background-color: #FFD2D2; }

</style>

<script type="text/javascript">

function validate(form1)
{
var error = new Array();
var valid = new Array();

if(form1.vorname.value.length == 0) error[error.length] = form1.vorname;
else valid[valid.length] = form.vorname;

if(form1.nachname.value.length == 0) error[error.length] = form1.nachname;
else valid[valid.length] = form1.nachname;

if(form1.rechnungsadresse.value.length == 0) error[error.length] = form1.rechnungsadresse;
else valid[valid.length] = form1.rechnungsadresse;

/* if(form1.plz_rechnungsadresse.value.length == 0) error[error.length] = form1.plz_rechnungsadresse;
else valid[valid.length] = form1.plz_rechnungsadresse; */

if(form1.email.value.length == 0) error[error.length] = form1.email;
else valid[valid.length] = form1.email;

if(form1.telefon.value.length == 0) error[error.length] = form1.telefon;
else valid[valid.length] = form1.telefon;


if(valid.length > 0)
{
for(var j = 0; j < valid.length; j++) valid[j].className = "text";
}

if(error.length > 0)
{
for(var i = 0; i < error.length; i++)
{
error[i].className = "text1";
error[i].select();
}

/* alert("Please fill out the red highlighted fields!");*/
return false;
}
}

</script>

</head>
<body>

<form id="form1" action="forum_question.php" name="buchen" method="post" onsubmit="return validate(this);">
<fieldset>
<legend>Ansprechperson</legend>
<p>
<input class="radio" type="radio" name="anrede1" value="Herr"/>Herr
<input class="radio" type="radio" name="anrede1" value="Frau"/>Frau
</p>
<p class="first">
<label for="vorname">Vorname*</label>
<input id="vorname" class="text" type="text" name="vorname" size="30"/>
</p>
<p>
<label for="nachname">Nachname*</label>
<input id="nachname" class="text" type="text" name="nachname" size="30"/>
</p>
<p>
<label for="rechnungsadresse">Rechnungsadresse*</label>
<input id="rechnungsadresse" class="text" type="text" name="rechnungsadresse" size="30"/>
</p>
<p>
<label for="plz_rechnungsadresse">PLZ*</label>
<select id="plz_rechnungsadresse" class="text" name="plz_rechnungsadresse" size="1">
<option selected="selected" value="">---</option>
<option value="1010">1010</option>
<option value="1020">1020</option>
<option value="1030">1030</option>
<option value="1040">1040</option>
</select>
</p>
<p>
<label for="email">E-Mail*</label>
<input id="email" class="text" type="text" name="email" size="30"/>
</p>
<p>
<label for="telefon">Telefon*</label>
<input id="telefon" class="text" type="text" name="telefon" size="30"/>
</p>
</fieldset>
<p class="submit">
<button name="submit" type="submit" value="Kontrolle">Senden</button>
</p>

</form>

</body>
</html>

Philip M
02-09-2012, 11:40 AM
Denes - please do not hi-jack and resurrect a long-defunct thread. Prefer to start a new thread of your own. Before you do, remember to have a look at the forum rules and posting guidelines.

Form validation of the pattern if(form1.vorname.value.length == 0) is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

Dénes
02-09-2012, 12:03 PM
Ok I'll give my best, go through the code and post my question as a new thread. Give me a chance, it was 3 days ago I began with javascript.

Dénes
02-09-2012, 02:30 PM
Got the answer.

I've only to kill:

error[i].select();

Then it works!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum