[Javascript] Change color in the field

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • viki1967
    Contributor
    • Oct 2007
    • 263
    #1

    [Javascript] Change color in the field

    Hi all.

    This code javascript not working... nothing error but not working... :(

    I need change color in the fields of the form when fields is null...

    My code:

    Code:
    function validateForm(Qform) 
{

  for (var a = 0; a < Qform.elements.length; a++) 
  
	{
	
	var field = Qform.elements[a];
	var incorrect = new Array();
        var no = 0;

      	if (field.value.length <= 0) 
		{
        	window.alert('K.O. !');
        	field.focus();
        	return false;
        	
      		} else { 
   	         incorrect[no] = "1";
   	         no++;
     		
      		    
      		    }
      		    
}

for(j=0;j<no;j++) {
  		document.getElementById(incorrect[j]).style.color="#FF0000";
  }

....

<form action="" method="post" onSubmit="validateForm();">

<span id="1">Title </span>
<input name="id" id="title" type="text" size="25" maxlength="6">

....
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      some thought about the code

      - you define validateForm() with a parameter (an object) but onsubmit there's no parameter given
      - when defining the incorrect[] array elements you should assign the appropriate id otherwise getElementById( ) won't return something
      - you redefine incorrect[] everytime you loop through the array, I think you should initialize it outside the for loop

        Comment

        • Ferris
          New Member
          • Oct 2007
          • 101
          #3
          Hi. There's too many problems in your code...so I rewrite your code...

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<script language="javascript">
<!--

function validateForm(Qform)
{
	var incorrect = new Array();
	var no = 0;
	for (var a = 0; a < Qform.elements.length; a++)
	{
		var field = Qform.elements[a];

		if (field.value.length <= 0)
		{
			incorrect.push( field );
			no ++;
		}
		else
		{
			field.style.backgroundColor="";
		}
	}
	for( j=0; j<no; j++) 
	{
		incorrect[j].style.backgroundColor="#FF0000";
	}
	
	if ( no > 0)
	{
		incorrect[0].focus();
		return false;
	}
	else
	{
		return true;
	}
}
-->
</script>

<body>
<form action="" method="post" onSubmit="return validateForm( this );">
<span id="1">Title: </span>
<input name="id" id="title" type="text" size="25" maxlength="6">
<br />
<span id="1">Content: </span><input name="content" id="content" type="text" size="25" maxlength="6">
<br />
<input id="submit" type="submit" value="OK" />
</form>
</body>
</html>

          I use incorrect array to save invalid field object,not index as you did. and pay attention to

          onSubmit="retur n validateForm( this );

          you should pass a form object into validateForm,an d the function must return a bool value, return false means the form will NOT be submit. if you didn't return a value,the form will be submit everytime.


          hope it helps.

            Comment

            • viki1967
              Contributor
              • Oct 2007
              • 263
              #4
              Many thanks x your great help !!!
              Kind regards
              Viki

                Comment

                Previous template Next
                Working...