How do I add a simple text field Validator?

[Martin Carreras]

Hi, I'm from Argentina.

I have a blank Input Text and an Input Button.

Input Button has already an "onClick" Javascript function.

I want to validate the input text (must not be blank) when clicking the Button.

I know it's very simple... but don't know Javascript.

Please need code that works in Firefox too !!

Thanks !!

[ZeroKilled]

what is supposed to do the button after validation? also, show the relevant HTML form code. without it, we can't help you nor should we doing guessing.

[Martin Carreras]

Before the "onClick" execution the Button must check the Input Text is not empty.

[ZeroKilled]

here is an example that verify if the field is empty, but you had not specified what is the type of the button (a submit or regular button) or what should happen after validation (submit the form or just nothing):

<form>
Type a user: <input type='text' name='user' />
<input type="button" onclick="if(!form.user.value.length)alert('User is empty');" />
</form>

[Martin Carreras]

ZeroKilled,

Here is the field and the button:

<input name="codigo" type="text" id="codigo" value="" size="46">

<input type="button" value="Agregar Tabla" onClick="AddTable();" />

The form name is "addTable"

[ZeroKilled]

so, before calling AddTable you want to check if the field is emtpy:

<input type="button" value="Agregar Tabla" onClick="if(!form.codigo.value.length)return; AddTable();" />

consider that spaces count as valid. if not desired, then indicate what determine a valid field. that's, should only contain number, or alpha chars, or both, etc..

[Martin Carreras]

It works OK! but I don't have an alert!

I confused, the form is called just "Form"... the Javascript I already have with the onClick is called "addTable".

Two questions:

1) So... this Javascript you are giving me executes BEFORE "addTable" ?

2) How do I add an alert and avoid blank spaces ?

Thanks again !!

[ZeroKilled]

I confused, the form is called just "Form"...

every form's elements have a property named form which is a reference to the form object that contain such element. so, because the code is defined on a function (the event) that is attached to the element, i can use form property without knowing the name of the form or without even doing the long reference document.addTable. however, both way are valid. but always remember that the shortcut form can only be used within the element.

I don't have an alert!

i used it for example purpose, but if that is what you need, then ok.

So... this Javascript you are giving me executes BEFORE "addTable"

yes, it does. actually, event are like function declaration. so, you can place as many statement needed and you can use the return statement as in function to prematurely exit the function or cancel the function execution. so, in the code i give, when the field is empty it exit the function without calling the next statement.

How do I add an alert and avoid blank spaces ?

<input type="button" value="Agregar Tabla" onClick="
if(/\W/g.test(form.codigo.value)){
alert("Entre solo caracteres alfanumericos: A-Z, 0-9"); return;
}
AddTable();" />

[Martin Carreras]

mm... that gives me an error :S

I've checked my values but still getting an error.

Without the alert works fine... but I need it.

Thanks !!

[ZeroKilled]

my apologies, missed a technical detail. replace the double quotes of the alert with single quotes.

[Martin Carreras]

Ok... no error now but it doesn't even Validate (no pop up alert also).

As if there were no validation at all.

Without the alert it validates.

[ZeroKilled]

forgot to check when field is empty....

<input type="button" value="Agregar Tabla" onClick="
if(/\W/g.test(form.codigo.value) || !form.codigo.value.length){
alert('Entre solo caracteres alfanumericos: A-Z, 0-9'); return;
}
AddTable();" />

[Martin Carreras]

ZeroKilled.... PERFECT !

You've been very kind with your help, it's working great now.

Thanks !!