www.webdeveloper.com
Results 1 to 13 of 13

Thread: How do I add a simple text field Validator?

  1. #1
    Join Date
    Apr 2009
    Posts
    20

    How do I add a simple text field Validator?

    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 !!

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Apr 2009
    Posts
    20
    Before the "onClick" execution the Button must check the Input Text is not empty.

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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):
    Code:
    <form>
    Type a user: <input type='text' name='user' />
    <input type="button" onclick="if(!form.user.value.length)alert('User is empty');" />
    </form>
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  5. #5
    Join Date
    Apr 2009
    Posts
    20
    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"

  6. #6
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    so, before calling AddTable you want to check if the field is emtpy:
    Code:
    <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..
    Last edited by ZeroKilled; 04-14-2009 at 07:24 PM.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  7. #7
    Join Date
    Apr 2009
    Posts
    20
    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 !!

  8. #8
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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 ?
    Code:
    <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();" />
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  9. #9
    Join Date
    Apr 2009
    Posts
    20
    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 !!

  10. #10
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    my apologies, missed a technical detail. replace the double quotes of the alert with single quotes.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  11. #11
    Join Date
    Apr 2009
    Posts
    20
    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.

  12. #12
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    forgot to check when field is empty....
    Code:
    <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();" />
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  13. #13
    Join Date
    Apr 2009
    Posts
    20
    ZeroKilled.... PERFECT !

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

    Thanks !!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles