2

I've made a client-side JS script that runs when the Register button is clicked for the current version of a site, but want to implement real-time validation on the client.

How do I handle some systems, e.g. iOS, not supporting the HTML5 features that are used to validate the form in real-time from a UX perspective? I want them to have a good, if not the same, experience across devices. Keep in mind: this is not about implementation. Server-side validation is in place, but does not yet resend inputs. Do I make it so that it sends back the data for the form to display?

4
  • What is your UX question? To solve your technical issue, you could do the validation with client-side JS or rely on HTML5 validation with polyfills (see html5please.com/#validation for recommendations). Sep 17, 2015 at 15:15
  • The question is about how I should handle the validation to keep it smooth for the user, if I can't use the validation I want to for their device, i.e. whether I should use a different method entirely, or have a backup.
    – DatBassie
    Sep 17, 2015 at 20:47
  • You say that it's not about implementation, but your questions really is about how you can implement the UX across devices, not what the UX should be. So to my mind, it's still about implementation.
    – JohnGB
    Sep 17, 2015 at 21:26
  • I can see why you say that, yes. I consider it answered, anyway.
    – DatBassie
    Sep 17, 2015 at 21:33

1 Answer 1

4

Assuming your question isn't about how validation should be implemented but about how validation should work to keep user experience smooth and uniform across all devices. If it's about implementation then Stack Overflow (for example) is a better place (but you should edit your question according SO's rules).

Introduction

Let's take, for example, a simple text box to enter an e-mail address inside a simple form (let me use simplified code):

<form>
    <input type="text" name="email" id="email"/>
</form>

You may now now add real-time validation for browser that support it:

<form>
    <input type="email" name="email" id="email"/>
</form>

However browser validation may not be supported, moreover browser won't stop you to submit a form if a field is invalid...you then need to add client-side validation before submitting data:

<form onsubmit="validateSubmission()">...</form>

<script type="text/javascript">
    function validateSubmission() {
        if (isValidMailAddress(document.getElementById("email"))
            return true;

        return false;
    }
</script>

Now you're reasonably safe: browser will warn user for invalid inputs and you also perform a client-side check before submitting.

However there are few more issues to consider:

  • Browsers may not support type="email" (or any other validation attribute such as required). You can detect this using modernzr but you also need to handle this case (both for CSS styling and JavaScript validation).
  • JavaScript may be disabled then, of course, you must also validate server-side. Always.
  • You're validating as-you-type if browser supports this but you're validating only on submit if it doesn't. To provide a validating as-you-type fallback feature you should also attach to <input> event onchange:

With this JS:

<script type="text/javascript">
    function validateEMail() {
        if (isValidMailAddress(document.getElementById("email"))
            return true;

        return false;
    }
</script>

Do a favor to your users and do not use onkeyup and onkeydown events, unless you do things carefully they don't work well with many IME (Korean one, for example). No need to add even more testing tasks.

Now we have the basics to answer your questions.

Answer

How do I handle some systems, e.g. iOS, not supporting the HTML5 features that are used to validate the form in real-time?

Check with Modernzr if browser support validation and put your own validation in place if it doesn't:

if (Modernizr.inputtypes.email && Modernizr.formvalidation) {
    document.getElementById("email").onchange = function () {
    }
}

Server-side validation is in place, but does not yet resend inputs. Do I make it so that it sends back the data for the form to display?

Resend inputs, always. Only exception is password (and other very sensible fields). There is nothing more annoying than reenter all fields because one of them was wrong.

Notes

This example is pretty simple but it allows to show a multi-step validation: to check an e-mail address is all but not trivial. Let's imagine user types [email protected]. Validation will be performed in steps:

  • Browser will validate [email protected], it's a valid e-mail address.
  • Your on-submit validation will reject this address because it's a fake @example.com.

Now your smart user will enter [email protected]:

  • Browser will validate it.
  • Client-side validation will accept it (one of your users is a Microsoft employee!)
  • Your server will reject such e-mail address because you have a black-list of fake e-mail addresses.

Now a very bad user will enter [email protected]:

  • Browser will validate it.
  • Client-side validation will accept it.
  • Your server will accepts it but it'll send a verification e-mail for confirmation.

In (almost) every case I'd avoid an on-line real-time validation (where browser sends to server data for real-time validation). Especially for mobile users with 3G connection it's bad:

  • You consume network bandwidth (and they may pay for it).
  • You consumes battery power.

There are few exceptions to this (for example when you have a typeahead control for complex/convoluted/esoteric inputs such as product codes) but, in general, I think it's better to do it once server side (you may consider to return a list of similar matches where user can pick from).

1
  • Thanks, some great input (pun intended) here that I hadn't thought of myself. I'll work on implementing this.
    – DatBassie
    Sep 17, 2015 at 20:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.