Can HTML validation fields be combined with Uniform validation?

Kirby 3 Solved ✅
1

@mzur Is it possible to combine HTML5 validation with Uniform’s validation?

I only ask because it’s possible to use CSS styling based on an input field’s validation status (:valid or :invalid) and these can be triggered either by the browser’s own ‘understanding’ of, say, an email pattern or a pattern set in the input’s own HTML code (say letters only).

But if I use HTML validation, I no longer see the Uniform validation messages. They’re pre-empted by HTML’s own per field error messages. Does this affect server side processing and validation of the form?

2

HTML5 validation happens client-side, based on HTML attributes. It gets checked on blur iirc, and you can indeed style it with CSS. So your form can’t be submitted before HTML5 validation succeeds.

Uniform’s validation happens server side, and results in a re-rendering of the page (on the webserver) with changes in HTML.

I like to use them both, in conjuction with eachother to avoid form submissions for ‘easy validations’ (e.g. required fields, e-mail fields, …). This way I don’t need to build my own client-side validation with JS.

2 Likes
3

@bvdputte Many thanks for the reply.

Just a quick follow-up question, if you can help with this.

Does this mean that as long as, at a minimum, I declare a ‘required’ rule in the Uniform controller, I can entirely handle front end validation with CSS and Javascript (for instant feedback)? I ask because using an HTML ‘required’ declaration completely overrides any messaging in the Uniform rules.

In other words, does Uniform only need only 'rules' => ['required'] to prompt it to do server side validation?

To be completely clear, the code for a form input would then only have to be something like:

<label for="name">First Name*
<input name="name" type="text" required>
</label>

(Plus any other tweaks like pattern matching and auto-capitalisation)

While the controller code would simply be:

'name' => [
    	'rules' => ['required']
    ],

(With extra parameters for email or patterns for extra security.)

Is this how you would do it?

4

What do you mean? HTML/the browser uses its own messages as it doesn’t have access to what you do on the server side. But yes, you can and should use HTML/JS validation for instant user feedback client-side.

But security-wise the important part is server side validation as you cannot rely on the client-side, because that is a) browser-dependent and can 2) easily be bypassed.

5

tl;dr -> frontend validation (albeit via HTML5 or JS) can easily be bypassed by savvy users. Backend validation is much harder to do (and as developer, you should do your utmost to make it impossible).

The longer answer is that

  • frontend validation with HTML5 is very easy to do, but only applies to “basic” things such as required, num, email, … It has the benefit of instant feedback, and combined with proper HTML5 field types it also makes your form much more accessible to users. Keep in mind that you need browser support for this, so you can’t rely on it, but it’s a low-hanging-fruit gain as progressive enhancement.
  • frontend validation with JS is harder to do, and in practice it often comes down to recoding your backend validations with JS. This takes a while, and needs a lot of testing, and must be kept in sync when serverside validations should change. It can also easily be bypassed, simply by disabling JS in your browser. The benefits are that you can start from HTML5 validation and enhance this even more for your user.
  • backend validation is a must -> since now you know you can work around the frontend validations…
6

Yep, combined with what you put below about HTML5 validations, should do it :+1:

As always; put some time into testing this! In my experience, I always do server side validations first, and add HTML5 validations afterwards (to be able to test it).

7

Me too!