cambiare classe tramite js

[leaf]

ciao, ho un form che ha una classe css ('green'). ho fatto uno script js che controlla i campi input e se contengono valori non corretti cambiano la classe css al campo input (in questo modo faccio diventare rosso il campo input sbagliato). il problema è che non so dove mettere la nuova classe per gli input..l'unico modo in cui sono riuscito a far funzionare il tutto fin'ora è stato togliendo il css alla pagina dove c'è il form e scrivendo la nuova classe css direttamente sulla pagina html. dove devo metterla affinchè conviva con il resto del css?

un po' di spezzoni di codice:

questo è il codice funzionante, ma ho dovuto togliere tutto il resto del css

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--<link type="text/css" rel="stylesheet" href="css/styles.css" title="Style" media="all" />-->
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<title>Iscrizione Nuovo Socio</title>    
<style type="text/css">
.inputreq
{
    background-color: rgba(255,0,0,0.5);
}
</style>

.......

<form method='post' class='green' action='GENinsertUtente2.php' name='form1' accept-charset="utf-8" onSubmit='return CheckGENinsUt(this)' >
    <h1>Compila i campi richiesti</h1>
        <table class='tab1'>
        <tr>
            <td>Nome</td>    
                <td><input type='text' name='nome' class="input"></td>
        </tr>

questo è un pezzo di css della classe 'green' del form

.green input[type="text"], .green input[type="email"], .green textarea, .green select {
    color: #555;
    height: 30px;
    line-height:15px;
    width: 100%;
    padding: 0px 0px 0px 10px;
    margin-top: 2px;
    border: 1px solid #E5E5E5;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    font: normal 14px/14px Arial, Helvetica, sans-serif;
}

e questa la parte js dove cambia il nome alla classe (c'è un array dei campi giusti e uno per quelli sbagliati..per quelli sbagliati cambia la classe in 'inputreq')

    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();
            }

grazie,
L.

[Prill]

Non entro nel merito dello script, per quanto riguarda il css la classe devi inserirla dopo le altre, ma dato che per i campi nel foglio di stile hai usato dei selettori discendenti, usa un selettore discendente anche per inputreq (.green input.inputreq)