SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Location
    Greece
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    registration form validation/client-side

    So far, in registration forms, I perform client-side validation the moment the user clicks the sign-up button.
    At that point error messaged appear in the form(ex.e-mail has not the right form)besides the input elements.

    My question is if you think it is better to perform the validation(we are always talking about client- side here) AT THE MOMENT the user
    fills the input fields...like twitter does for example.

    I think this is called live validation.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Better to only show an error when they make one.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Location
    Greece
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Better to only show an error when they make one.
    And what this translates to...using live validation?

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I guess. Jquery validation plugin is like this.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There are three points at which you can validate form fields using JavaScript.

    1. Just before thre form is submitted you validate all of the fields (including cross field validation) to save a visit to the server if the errors can be detected without reference to the server.

    2. As each field has been updated you can perform any validation specific to that field.

    3. As each character is entered into a field you can validate whether that character is valid for that field and discard any that are not allowed.

    The first of these is attached to the submit event. The second of these is attached to the blur or change event. The third of these is attached to the keypress or keyup event.

    Apart from the event triggering the validation the coding of the functions to validate complete fields for both 1 and 2 above is the same. The functions for validating 3 will be slightly different as they validate individual characters rather than the complete field.

    http://javascriptexample.net/domform12.php and http://javascriptexample.net/domform15.php are examples that show how to add validation to individual fields and http://javascriptexample.net/domform13.php shows the extra code needed to do the entire validation again before the form is submitted.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    CSS valid and invalid states do this (validate before you even had a chance), and basically it's telling me I'm a freaking retard before I even get the chance to prove that. Which is annoying to the max.

    It's like insulting people as they walk into your house, and then if they don't act like jerks, apologising and welcoming them belatedly in. Bleh.

    Onblur validation can be useful or annoying, and I would say test that per input on people. Like if users are asked to repeat an email address or password, it's nice to know right away that they don't match, rather than waiting til you get to the bottom and try to submit.

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at how jquery validation works ( as an earlier responder pointed out ).

    jquery validation kicks in on blur.

    If you enter a valid input and tab away from it there are no errors ( obviously ).
    But if user entered an incorrect input, the user immediately sees an inline error.

    IMHO this is better than waiting for the user to fill out the complete form, click submit and then show all errors at once.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Sites that need it yeah ok validate the inputs info you need. But for a simple contact form I only validate the (JS at least) the spam captcha. If they don't want to give me there email so be it. I won't email you back. I do validate with php for spam sh*t in the inputs though.


Bookmarks

Posting Permissions

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