www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23

Thread: JavaScript/JQuery Form Validation Help

  1. #16
    Join Date
    Jul 2014
    Posts
    16
    Thanks Deathshadow for the examples, I'm going through them now so I'll let you know if I have any questions.

    One question I did have though would be how would you recommend handling a field "Date Purchased". So the individual must enter in a date, I know it has been discussed typing it in and just selecting it. If I were to have it just typed in what's the best way to validate it's an actual date?

    Thanks again - sorry for any dumb questions, you guys have been helpful!

  2. #17
    Join Date
    Jul 2014
    Posts
    16
    Never mind I got something figured out, thanks

  3. #18
    Join Date
    Oct 2013
    Posts
    610
    Interesting.

    So putting a red border around the fields and putting "You must enter a value in this field" in red underneath (basically telling the user they are too stupid to use your form) is somehow more user-friendly than having 31 options under a select.

    I'll have to remember that.

  4. #19
    Quote Originally Posted by Kevin2 View Post
    So putting a red border around the fields and putting "You must enter a value in this field" in red underneath (basically telling the user they are too stupid to use your form) is somehow more user-friendly than having 31 options under a select.
    It is when they're typing in a name, or a e-mail address... or even the name of their state. What's easier, a SELECT of 50 OPTION, or typing in two letters? They enter something wrong, slap them in the face with it... but if they are entering something wrong, there's either something wrong with your labels and other supporting text, or something wrong with their literacy skills.

    Or with a date, would it kill us to put MM/DD/YYYY as extra text below the input or as it's placeholder? Three select for one value with endless pointless options is a pain in the ass compared to simply saying:

    HTML 4:
    Code:
    <label for="register_datePurchased">Date Purchased:</label>
    <input type="text" name="datePurchased" id="register_datePurchased" />
    <p>Must be in MM/DD/YYYY format</p>
    HTML 5:
    Code:
    <label for="register_datePurchased">Date Purchased:</label>
    <input type="text" name="datePurchased" id="register_datePurchased" placeholder="MM/DD/YYYY" />
    If they are too stupid to follow those instructions, that's not your problem, it's theirs.

    Though with something like a date -- and maybe even that zip field, I'd consider adding a scripted input filter to them. I'll add an example of that in action to that demo. ... and if going the re-re HTML 5 route, remember that PLACEHOLDER is NOT a substitute or replacement for LABEL!!!

    Regardless though, you should ALWAYS re-check again server-side. Usually when I do this I skip scripting validation as if you have enough failures and enough markup for re-sending the populated incorrect form to be an issue, you're doing something wrong -- but when I do scripted validation I code it so that it functions identically scripting or no... basically make the scripting off fallback generate identical code to the scripting on one... hence the adding and removal of values from the DOM.

    Really SELECT is annoying as hell past around a dozen OPTION -- generally speaking it's disastrously bad usability compared to just letting people type something in, or using a fieldset filled with radio-buttons; gets worse though when people use select outside of forms (which makes no sense) for scripttardery to do anchor's job.

  5. #20
    Join Date
    Oct 2013
    Posts
    610
    Quote Originally Posted by deathshadow View Post
    They enter something wrong, slap them in the face with it
    Wait, hold on. I'm writing down all this good stuff.

    Slap

    User

    In

    Face

    OK, got it!

    I'll remember that also. They'll be sure to come back to my site.

  6. #21
    Join Date
    Oct 2013
    Posts
    610
    Quote Originally Posted by deathshadow View Post
    If they are too stupid to follow those instructions, that's not your problem, it's theirs.
    No. Just .. no.

    If your form needs more "instructions" than the <label> tag supplies you have not done your job as the form designer/developer.

    You're the guy who claims most of his site's visitors can only click on the Big Blue E. If that's the true case you need to design forms for them, stupid or not.

    Forms are the developer's problem not the user's. If you get **** for submissions, your form is ****. Think about it.

  7. #22
    I just uploaded a version with preliminary key filtering in place and some more colour coding handling. Not complete, just showing what I mean.

    http://www.cutcodedown.com/for_other.../template.html

    Be sure to refresh to get the new JS and CSS. I still need to play with the blur/change a bit more, and add a few more filters and checks. Also think I might integrate this into my form generator so it can be better automated. One big thing to add is v_compareTo -- so it can compare one field to another. For example if you had:

    <input id="register_eMail" name="email" class="v_required v_email" />
    <input id="register_eMailVerify" name="email2" class="v_compareTo_register_eMailVerify" />

    The second one should throw an error if it doesn't match the first.

    Oh and Kevie - if all the instructions needed would go in label, then why did they create placeholder? For that matter, why does it say ... and I quote:

    "The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control."

    LABEL says what it is, PLACEHOLDER says what it could be, advisory text goes after since it's NOT labeling the input. Since such text would be flow, one could assume P is the logical choice; just like the error messages. What, are you going to put the 'required' error message in the label too?

    Oh, and you do realize that "slap them in the face" is a joking exaggeration, right? Basically I just meant drive the user to correct their mistakes.

    It's called a sense of humor; you should get one, they're nice. Wait, did I just quote Pretty in Pink? Ouch. Geek check.

    In any case, designing for users means clear cut instructions AND second level checks. A nice clear key in the corner for the colouring, text for those who don't see colours, AND both client and server-side checks of EVERYTHING.

  8. #23
    Join Date
    Mar 2012
    Posts
    1,835
    @ Minnesota31

    Please do not quote the whole of a post that you are referring to. Either:

    - If you are replying to specific points, edit the quote down to those points. Or...

    - Use @ <username> to signify who your post is addressed to.

    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