Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation - Textbox Color Change

    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.
    ForumLaunch Staff: We post on your forum

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Just change the classname:

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

    Good luck

    EDIT: Just for example:
    Code:
    <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>
    Last edited by Brandoe85; 10-19-2005 at 10:35 PM.

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot, I got it working.

    Code:
    function checkform_signup(frm) {
    if (frm.domain.value.length == 0) {
    	document.signup.domain.className = "inputreq";
    	return false;
    }
    return true;
    }
    ForumLaunch Staff: We post on your forum

  • #4
    New Coder
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay I have another problem with it. Brandoe85, your sample form has the same problem.

    Code:
    <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?
    ForumLaunch Staff: We post on your forum

  • #5
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Try this:
    Code:
    <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

  • #6
    New Coder
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey could you tell me how I can do that with this script.

    Code:
    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;
    }
    ForumLaunch Staff: We post on your forum

  • #7
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Try this:
    Code:
    <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

  • #8
    New Coder
    Join Date
    Sep 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Everything is perfect, thanks Brandoe85!
    ForumLaunch Staff: We post on your forum

  • #9
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    PHP Code:
    var myTxtBoxes document.getElementsByTagName('input');
    for (var 
    counter=0counter<myTxtBoxes.lengthcounter++)
    {
      if (
    myTxtBoxes[counter].type=='text')
      {
        if (
    myTxtBoxes[counter].value.length==0)
          
    ErrorElms[ErrorElms.length]=myTxtBoxes[counter].name
        
    else
          
    ValidElms[ValidElms.length]=myTxtBoxes[counter].name;
      }


  • #10
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    select tag

    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.

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

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got the answer.

    I've only to kill:

    error[i].select();

    Then it works!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •