Form validation with css3

I’ve just read that using php to validate forms fields is quite risky because any information that has to be corrected will result in the rest of the info entered into the form being wiped due to pushing the back button on the browser…is this correct…are there workarounds…?

If not what is the form validation like in css3… do many people use it and is it versatile enough to implement…?

PHP, being a server-side technology, when used, is bound to validate whatever data the end user inputs. There is no “workaround” for server-side validation.

After validation, you send back the data along with error messages showing which entries are not valid. That’s the workaround for when users don’t manage a correct input.

HTML5 has to do with fields getting validated client-side before being sent to PHP for server-side validation, not CSS3.

Web Forms - Dive Into HTML5

ah right ok thanks for the link nooonope

Is there any chance a mod can move this to the HTML forum as I want to ask about changing the default text HTML5 validation gives…?

I guess its ok to ask here… :slight_smile:

Is it possible to change the default text displayed by HTML5 form validation…?

I have a feeling its upto the browser…

Yes, it’s up to the browser… and JS: setCustomValidity.

You can’t change the default validation text unless you override the behaviour with Javascript code. Which is more trouble than it’s worth (like in you better make your validation a custom JS to start with instead going that route). Which makes the use of HTML5 validation pretty much useless.

There are some benefits for using HTML5 form enhancements: date input, number input. But the fact that you can’t have a custom message set and there is no localization in place yet, means it’s still at an experimental stage.

You still need server side validation regardless of what HTML5 offers. HTML5 does not stop someone from hacking the request variables or making their own http request. As far as I am concerned this feature is going to promote laziness and make websites susceptible to being hacked. HTML5 and JavaScript validation is all presentational. It only exist to increase the user experience but should never be relied on. Server side validation must always take place.

If the browser doesn’t support HTML5 or if the HTML5 is implemented with javaScript and JavaScript is off then no validation in the browser will be performed.

If the person changes your HTML to detach all the validation done via HTML5 and JavaScript then there will also be no validation performed.

The only place you can guarantee that validation is performed is on the server after the form is submitted.

Yes, server side is the prize you need to keep your eyes on. And HTML5 form validation may help you do just that.

Saying that, having a little help on client-side to cut down the round trips doesn’t hurt.

Whether with JS, like how it’s done now, whether by HTML5, even with HTML5+JS on client side, that may save some server load and network traffic with pointless multiple request in stupid cases like putting a letter in a numbers only field.

The misconception is that with HTML5 form enhancements, like validation, it’s a step in replacing the server-side validation logic.

It’s not about replacing the server-side logic on validation, but about reducing the time it takes for a user to correctly input the values, taking some load off of the server-side and network traffic, and providing a user friendly experience.

Thanks alot guys

It seems the best way is to learn how to write it in PHP without the user deleting all the entered fields when pushing the back button if one of them needs to be rectified.

Hacking a request variable…now this is getting scary :slight_smile:

It depends why you’re validating the input.

If it’s because people could use malicious code to hack your system then yes, you need to use server-side validation. If it’s because the form processing will fail if people don’t fill it in correctly then yes, you need to use server-side validation. But if it’s just a courtesy check that they haven’t made any stupid mistakes like writing their date of birth in the phone number field, there’s no need for this to be done server-side if client-side (using JS a/o HTML5) is easier.

IMX, one of the most common errors made when filling in web forms is people who type their own email address wrong. No amount of client- or server-side validation will pick those up.

It seems the best way is to learn how to write it in PHP without the user deleting all the entered fields when pushing the back button if one of them needs to be rectified.

This is what sessions are for: as noonope said, when you return the page to the user after they’ve goofed, you’re sending back the form, filled in with their info, and the incorrect fields marked as so. The user doesn’t have to re-fill in all the other fields too, only the ones who are wrong. And with a session, the back button (or moving between multiple forms who are each on a separate page but share data) doesn’t clear user data (if users have browser caching on, the back button doesn’t remove data, but if they have browser caching turned off, that’s when the back button clears their forms. A session can prevent this reliance on browser caching being on).

Is it possible to change the default text displayed by HTML5 form validation…?

Why you wouldn’t want to do this… one reason is, if it’s built into the browser (like the text the user sees when you make a File Upload input type=“file”) is because the validation text will be in the language the user has set on that browser. So if you did manage to change the text with Javascript to something else in English, users with non-English browsers might get an English message.
While you could argue that they need to understand English to use your site anyway, when it comes to browser controls, it’s still best to keep browser-chrome and -controls in the native language setting.

I’m not hot for HTML5 but being able to do validation/error messages in the language set in the browser is another plus over Javascript validation.

That is a very interesting point about the language default on the browser, I wasnt actually aware of that and do agree that perhaps some default settings are always best.

I definitely believe you’ll be happiest with Javascript front-end validation (instead of HTML5 form controls) so you can control the front-end messages, and a session in the back end to keep user data from vanishing.

I havent really looked into JS yet as PHP has been taking up a hell of alot of my brain cells but JS seems to be able to add the finishing touches.

The more and more I read about HTML5 it seems better to stick with XHTML. Broswer support is obviously better and the new features in HTML5 don’t seem to be as helpful as I thought. But I have to say the ease of the doctype is lovely to look at :slight_smile: