SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    javascript and css class problem

    I been working on a registration form, first I did the JavaScript to validate the fields and everything works just fine, but now I decided to create this CSS

    Code CSS:
    	.correct_field
    		{
    			padding-right:18px;
    			background:url('correct_field.png') no-repeat 100% 0;
    		}
    	.incorrect_field
    		{		
    			padding-right:18px;
    			background:url('incorrect_field.png') no-repeat 100% 0;
    		}

    the CSS is not used until the script checks the field, this is one of the checks that is done in some fields
    Code JavaScript:
    function numbers()
    	{
    		if (NOnumbershere.test(thevalue) == true)
    			{
    				document.getElementById("errors_console_1").innerHTML = ("No numbers are allowed in this field.<br>Only characters a-z in the field.<br>Please correct it!");
    				count_errors++;
    				error=true;
    				errors_console();
    				button_disabler();
    				thefield.className="incorrect_field"; // here is my problem at the moment
    				initialize_check_text_field();
    				stop(event);
    			}
    	}

    basically the field is checked and when someone enters a number or numbers an error is displayed and the style of the field is changed so it shows the image in the CSS above and it works just fine.

    Now, the problem, after the class is applied the script does not check again once the user corrects the field because now the CSS class is the one in the field and not the JavaScript class.

    does anyone know how I can manage to add that CSS class without messing up the script?

    So, I did some research and found that doing className += should work, but I did that and it still does not work, any ideas?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    Now, the problem, after the class is applied the script does not check again once the user corrects the field because now the CSS class is the one in the field and not the JavaScript class.
    The standard technique is to remove the error class name at the start of performing your checks.

    That way it remains removed if it passes the validation, and if it doesn't then the class name is put back there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by paul_wilkins View Post
    The standard technique is to remove the error class name at the start of performing your checks.

    That way it remains removed if it passes the validation, and if it doesn't then the class name is put back there.

    Thank you, I had it that way, but there was a different problem in my script, and what you said made me realize where I was messing up.


Bookmarks

Posting Permissions

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