473,765 Members | 2,047 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

[Javascript] Change color in the field

263 Contributor
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. function validateForm(Qform) 
  3. {
  4.  
  5.   for (var a = 0; a < Qform.elements.length; a++) 
  6.  
  7.     {
  8.  
  9.     var field = Qform.elements[a];
  10.     var incorrect = new Array();
  11.         var no = 0;
  12.  
  13.           if (field.value.length <= 0) 
  14.         {
  15.             window.alert('K.O. !');
  16.             field.focus();
  17.             return false;
  18.  
  19.               } else { 
  20.                 incorrect[no] = "1";
  21.                 no++;
  22.  
  23.  
  24.                   }
  25.  
  26. }
  27.  
  28. for(j=0;j<no;j++) {
  29.           document.getElementById(incorrect[j]).style.color="#FF0000";
  30.   }
  31.  
  32. ....
  33.  
  34. <form action="" method="post" onSubmit="validateForm();">
  35.  
  36. <span id="1">Title </span>
  37. <input name="id" id="title" type="text" size="25" maxlength="6">
  38.  
  39. ....
  40.  
  41.  
Aug 29 '08 #1
3 2781
Dormilich
8,658 Recognized Expert Moderator Expert
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
Aug 29 '08 #2
Ferris
101 New Member
Hi. There's too many problems in your code...so I rewrite your code...

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test</title>
  6. </head>
  7. <script language="javascript">
  8. <!--
  9.  
  10. function validateForm(Qform)
  11. {
  12.     var incorrect = new Array();
  13.     var no = 0;
  14.     for (var a = 0; a < Qform.elements.length; a++)
  15.     {
  16.         var field = Qform.elements[a];
  17.  
  18.         if (field.value.length <= 0)
  19.         {
  20.             incorrect.push( field );
  21.             no ++;
  22.         }
  23.         else
  24.         {
  25.             field.style.backgroundColor="";
  26.         }
  27.     }
  28.     for( j=0; j<no; j++) 
  29.     {
  30.         incorrect[j].style.backgroundColor="#FF0000";
  31.     }
  32.  
  33.     if ( no > 0)
  34.     {
  35.         incorrect[0].focus();
  36.         return false;
  37.     }
  38.     else
  39.     {
  40.         return true;
  41.     }
  42. }
  43. -->
  44. </script>
  45.  
  46. <body>
  47. <form action="" method="post" onSubmit="return validateForm( this );">
  48. <span id="1">Title: </span>
  49. <input name="id" id="title" type="text" size="25" maxlength="6">
  50. <br />
  51. <span id="1">Content: </span><input name="content" id="content" type="text" size="25" maxlength="6">
  52. <br />
  53. <input id="submit" type="submit" value="OK" />
  54. </form>
  55. </body>
  56. </html>
  57.  
  58.  

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.
Aug 30 '08 #3
viki1967
263 Contributor
Many thanks x your great help !!!
Kind regards
Viki
Aug 31 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

0
7070
by: Gowhera Hussain | last post by:
Use This for Learning Only .... Do Not Try To Act Smart HACKING WITH JAVASCRIPT Dr_aMado Sun, 11 Apr 2004 16:40:13 UTC This tutorial is an overview of how javascript can be used to bypass simple/advanced html forms and how it can be used to override cookie/session
12
6558
by: Kevin Lyons | last post by:
Hello, I am trying to get my select options (courses) passed correctly from the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html I am having difficulty getting the courses to pass the correct option value and then be displayed at the following URL: http://www.dslextreme.com/users/kevinlyons/selectResults.html I am passing countries, products, and courses. The first two display
7
1984
by: Trvl Orm | last post by:
I am working with 2 frames, Left and Right and the main code is in the left frame, which has been attached. Can someone please help me with this code. I am new to JavaScript and can't figure it out. What needs to happen is this: On the left frame you should have a series of buttons, which when pushed makes things happen on the right frame.
34
4924
by: Andrew DeFaria | last post by:
I thought this would be fairly straight forward but apparently it's not. Given the following html file: <!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>Test</title> </head> <body> <form method="post" action="javascript:">
5
1820
by: John | last post by:
Hi, I have an asp.net form where if the user enters an incorect date I change the color of the textbox to red and also display a label field with a message saying the date is invalid. What I would like to do is to have some way to trap the event where the user changes the date and reset the color of the textbox to white and change the error lablel to hidden. I want to do this before the page gets submitted back to the server so I've...
2
3156
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button then the calender gone actually i want if i click outside off the calender then it should me removed ..How kan i do this ... Pls inform me as early as possible .. I am waiting for ur quick replay ...Here i attached the source code .... <!DOCTYPE...
0
9568
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9399
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10163
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10007
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9835
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6649
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5423
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3924
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2806
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.