Change the class of a input field

Question

Sorry. Let me rephrase:

I want js to change to class of a input field if it is left empty; Here is my code to detect a empty field:

function validateForm()
{
    var ctrl = document.forms["form1"]["username"];
    var x=ctrl.value;
    if (x==null || x=="") {
////////////CHANGE INPUT CLASS/////////////   
    }
    else {
    document.getElementById('username').style.backgroundColor="#FFFFFF";      
    }
}

i would have to css classes:

.inputfield {
background-color:white;
}

.inputfieldempty {
background-color:red;
}

There are four separate tasks in this question. Which one is giving you trouble? What code do you have so far? — Quentin, Sep 30 '11 at 07:45
I have a form which posts the contents to a php process page. I want it to post ONLY when all fields are filled. And when a field is left empty it should change bgcolor — SebastianOpperman, Sep 30 '11 at 07:48
If you want an easy way (instead of learning how it's done), youz could use the [jQuery validation plugin](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) — Pekka, Sep 30 '11 at 07:49
I think that will be easier and faster to deal with code snippets... — i100, Sep 30 '11 at 07:49
[This post](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) might contain the answer you are looking for. — Wex, Sep 30 '11 at 07:59
@Wex, actually it contains one half of the answer. The other half would be how to prevent the form to be posted if invalid. — Dennis Traub, Sep 30 '11 at 08:03
Sorry guys for the 2 part question. Basicaly it must not post the form if the fields are empty and it should just change the class when the user leaves a field empty — SebastianOpperman, Sep 30 '11 at 08:06
how would you prevent the form from submitting using javascript — SebastianOpperman, Sep 30 '11 at 08:17

score 0 · Answer 1 · answered Sep 30 '11 at 07:51

Have a look at this tutorial for the excellent jQuery Validation plugin, which does exactly what you need and you don't even have to fiddle with cross-browser concerns.

If you don't want to use the plugin, I still recommend at least to use jQuery. Here's another tutorial that goes through all the necessary steps.

score 0 · Accepted Answer · answered Sep 30 '11 at 07:52

0

To prevent submitting you need to call a function for the onsubmit event of the form (e.g. onsubmit="return checkFields()". In the function you will do the validations and return true or false depending on that. If the function will return false then the form will not be posted.

As part of your validations when you determine that a field's value is empty you can do the desired css changes as well. I don't know if you use vanilla javascript or a library such as jQuery in order to give more specific details.

answered Sep 30 '11 at 07:52

CyberDude

8,541
5
29
47

Do i add it to the
or the ? if it is true how do you tell it to post
– SebastianOpperman Sep 30 '11 at 08:02
You add it in the form element. Simply returning true or false will make the form submit or not. – CyberDude Sep 30 '11 at 08:03

score 0 · Answer 3 · edited May 23 '17 at 12:12

0

This post should take care of adding your CSS classes: Change an element's class with JavaScript

This post should take care of preventing forms to submit: https://developer.mozilla.org/en/DOM/event.preventDefault

edited May 23 '17 at 12:12

Community

1
1

answered Sep 30 '11 at 08:08

Wex

15,539
10
64
107

Change the class of a input field

3 Answers3