[Javascript] Newbie - Making a Inline validation using js DOM and CSS

Nick Fitzsimons nick at nickfitz.co.uk
Wed Mar 11 10:31:35 CDT 2009


Hi,

In your error function you are returning false when a field is empty;
therefore, if the name field is blank, it returns false and never goes on
to check the other fields.

Try breaking it apart into smaller functions to see the flow more clearly;
try this:

function validateField(fieldId, errorId) {
    var field = document.getElementById(fieldId);
    var value =  field.value;
    if (value == "") {
        document.getElementById("errorId").style.display = "inline";
        field.focus();
        return false;
    } else {
        document.getElementById("errorId").style.display = "none";
        return true;
    }
}

function validar() {
    return validateField("nome", "erro_nome")
    && validateField("idade", "erro_idade")
    && validateField("email", "erro_email");
}

Then change your field HTML to just check the field that's blurring:
<input type="text" name="nome" id="nome" onblur="return
validateField(nome);"/>

(...do the same for the other two fields).

There are a few other things you will probably have to do to get the code
working reliably (for example, if somebody just types a space the check
for "" will fail - Google for "javascript trim" to see how to deal with
this) but the above should get you started.

(Note: I haven't tested the above, so keep an eye out for any typing
mistakes I've made :-)

Regards,

Nick.

On Wed, March 11, 2009 2:57 pm, MEM wrote:
> Hi all,
>
> Ok. I have a CSS class to hide divs with the 'display' property.
>
> The point is:
> when the user changes the focus, it displays the "error_div" OF THAT
> ASSOCIATED FIELD.
>
> I have several problems that I can't see to find a solution:
> 1) Does not work with IE ! (onsumbit seams having no effect on IE, since
> no
> matter if the onsubmit is true or false, the form gets submitted!) What
> may
> be the problem?
>
> 2) When the onblur() function is executed the function returns the error
> message, if a field is empty. Good. But it doesn't make the relation
> between
> the onblur() of a specific textfield, and that textfield error div
> message.
> I mean: If we don't type the "name" and the "age" field for example, and
> you
> click with your mouse over the age field and then, without write anything
> inside, you take your mouse away, you will not receive the error: "please
> insert your age" but, instead, you will receive "please insert your name",
> only because the name comes first.
>
> 3) When the user touches submit, it shows only one error message at the
> time. To see the next error, the user needs to hit submit again. What is
> the
> technique to search, for displaying all errors at once?
>
>
> I understand that my error is not really related with javascript, is more
> related with newbie programming incapacities. But can I please have a
> light
> about how to solve this issues?
>
> Here is the code:
>
>
> &&& THE FUNCTION
>
> function validar(nome,idade,email) {
>
> 		var nome = document.getElementById("nome").value;
> 		var idade = document.getElementById("idade").value;
> 		var email = document.getElementById("email").value;
>
> 			if (nome == "") {
>
>
> document.getElementById("erro_nome").style.display = "inline";
> 				document.getElementById("nome").select();
> 				document.getElementById("nome").focus();
>
> 		  		return false;
>
>   			}
>
>
> 			else if(idade == "") {
>
>
> document.getElementById("erro_idade").style.display = "inline;"
> 				document.getElementById("idade").select();
> 				document.getElementById("idade").focus();
>
>
> 				return false;
>
> 			}
>
>
> 			else if(email == "") {
>
>
> document.getElementById("erro_email").style.display = "inline;"
> 				document.getElementById("email").select();
> 				document.getElementById("email").focus();
>
> 				return false;
> 			}
>
>
> 		return true;
>
>
> 	}
>
>
>
> THE FORM:
>
> <form action="teste_php_confirmar.php" method="post" id="inserir_dados"
> name="inserir_dados" onsubmit="return validar(nome,idade,email);">
>
> <label>Nome:
> <input type="text" name="nome" id="nome" onblur="return validar(nome);"/>
>
> <div class="erro" id="erro_nome">Campo Obrigatorio: Introduza um
> nome.</div><br />
> </label>
>
> <label>Idade:
> <input type="text" name="idade" id="idade" onblur="return
> validar(idade);"/>
> <div class="erro" id="erro_idade">Campo Obrigatorio: Introduza a
> idade.</div><br />
> </label>
>
> <label>Email:
> <input type="text" name="email" id="email" onblur="return
> validar(email);"/>
> <div class="erro" id="erro_email">Campo Obrigatorio: Introduza um
> email.</div><br />
> </label>
>
> </form>
>
>
>
>
>
> Regards,
> Márcio
>
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript
>


-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/





More information about the Javascript mailing list