What is the point in validating your HTML forms using Javascript, if you are always going to need to validate the forms using PHP anyway? I realize that you get a speed boost from this, and its more convenient to the user, but beyond that, is the time spent on it worth it? If anyone has any good evidence on this I would love to hear it.
Thanks for any help!Metropolis
UPDATE
After receiving numerous answers I would like to change the question a little. We all know that javascript is much more convenient for the user and it gives faster feedback. What I am wondering is: Has anyone ever seen any "evidence" that its worth it? Or do we just do it because it makes things a little better and everyone says we should? The speed difference is not that significant, and as the internet gets faster javascript validation will become even more obsolete I would think.
I am starting to wonder if the time spent validating a page using javascript could be better spent.
Ideally, you validate through javascript and (in your case) PHP.
Both validation methods will work in-tandem to ensure you get the most robust and user friendly functionality possible for your end user.
You will use client-side validation to ensure that all fields are filled in, email addresses are valid, etc.. this will provide instant feedback and won't burden your servers or the user's internet connection.
you validate server-side for security. You can control everything on the server and nothing on the client machine. It's here that you ensure that all entered data is non-malicious and correct.
Keep this in mind: if you are only going to go with one type of validation, choose server-side validation because it is more secure. You should never rely on client-side code for any kind of security.
Using both types of validation gives you the best of both worlds (responsiveness and security) while having none of the downsides. Of course, this means you have to write more code, but in my opinion, it's worth it.
EDIT: In response to the comments
Yes, you have to write more code this way... As a rule of thumb, if it's harder for the programmer, it's easier on the user. It might not make sense in some budgets to do both types of validation and that's a call you're going to have to make. Just make sure your server side validation is rock-solid regardless.
Yes, time is money, and time invested in improving the user's experience is time well spent. If you can't afford to do it now (deadlines/schedule/budget) then do it when you can.
It's all about usability. It is much more convenient for the user to read what errors they have made before the page reloads, rather than continuously submit and reload the page. It can also give a nicer look with some AJAX and the likes, rather than a reload of the page and the very ugly looking red error messages, I think. So the advantage? Much more usable than having server side validation alone.
To provide a better user experience.
The feedback on JS validation is faster, and therefore better than server-side validation on form submit.
The main point of JavaScript validation (when available) is that it improves the user experience. A round-trip to the server requires a page load and the associated annoying flicker as it redraws. Validating in JavaScript code allows you to display a message without all that.
That being said, server-side validation is still required since JavaScript isn't always available (NoScript is quite popular) and because a malicious user will bypass the JavaScript.
Particularly for database backed websites, it tends to be that you need to do server side validation anyway. e.g. to make sure you're inputting valid data into a database or other system. Depending on what the website is updating this could be absolutely critical.
However, client side validation can provide a better user experience. It can be used to provide instant feedback. e.g. when you move focus away from a text box a validator can provide instant feedback which is great when you're filling in a long complicated form.
The bottom line is that you will still need to input good data into your database. And the more correct the information stored in there, the less problems with the system you'll have later. You need both.
e.g. What if someone updates the website code in the future and breaks the validation? or someone writes a script to automate inputting data, bypassing your web front end all it's validation?
I'll say it again. You need both.
...i think you're also keeping your karma cleaner, when hundreds or thousands of your users don't wish you burn in hell for making them fill in 5-7 fields (with textarea) to be informed on the next page they mistyped their email so they have to start all over again :D
it doesn't eat up much of my time to incorporate javascript, id say 1-2 minutes maximum for 1 form. and it saves lots of nerve cells of my users. be a humanist! love ur neighbour!))
Client-side validation allows for an increased user experience. The feedback you give to the user leads to less frustration, less errors, more conversion, more money.
You generally have a better response rate with this kind of validation, which is very valuable.
An high quality software needs this. Users feels happy, and they will spread their joy. A user who has a bad experience won't come came and won't tell his friend.
It's not only decoration when you get to business and sales. ;) The return on investment is worth it.
Easy.
Javascript to help the user enter correctly formatted data.
PHP to make sure whatever enters your script gets cleansed before further processing.
Ofcourse you'll have to do both. Users want it, your customers want it and frankly, you think it's fugly getting php errormessages after submit aswell.
I don't think the argument of having to code extra .js which presumably would eat up your time/budget holds any thruth. There's so many libs and scripts outthere, either one will enable you setting up disco validation in no time at all. However, don't get carried away with dealing out eye candy. .js validation is just there to help. Not to impress.
PHP runs serverside, javascript runs clientside. You don't want your server crunching form validation when you can get the clients computer to do so. Plus it saves bandwidth.
Related
i have made a simple php contact form following this tutorial:
http://www.catswhocode.com/blog/how-to-create-a-built-in-contact-form-for-your-wordpress-theme
The big problem is that this form processing is not safe, I have heard people can use it to send spam and/or hack my server.
What are the basic steps needed to make this form more secure?
Ps: I don't want to use re-captcha if it can be avoided...
Edit: I need suggestions to what php functions are used to filter and secure that the form is submitted "the right way" and not altered and/or used to hack my site or send email to other people (using the site to send spam to other people). Do i just need to use strip_slashes? or is there a better way?
One way: If you're not a huge site, it's not likely anyone is going to figure this out/take the time to.
You could use some tricky JS to handle tokens on click. So your server issues token-id's to clickable/focus-able elements on the page during the backend render phase. Log these in a database or data file. Then, when users click around and submit, you can compare the id's sent via the onclick() function. You could also apply some heuristics to determine if the history of clicks is reasonably paced. Posts are too fast to be a human or not, that is, even if they scripted the hijacking of the token-ids and auto submitted, you could check that the time between click events appears automated. Signed up for a twitter account lately? They use passive human detection that while not 100% foolproof, it is slower and more difficult to break. Somebody would REALLY want to hack/spam your site.
Important Step 2: strip out/URLEncode strange characters if you think this will break your page. common ones that break things are " and ' and :
Another Way: http://areyouahuman.com/
As long as you are using encrypted methods verifying humanity without crappy CAPTCHA is possible.I mean, don't ignore your headers either. These are complimentary ways.
The key is to have enough complexity to make for an NP-Complete problem. http://en.wikipedia.org/wiki/NP-complete
When the day comes when AI can solve multiple complex Human problems on their own, we will have other things to worry about than request tampering.
http://louisville.academia.edu/RomanYampolskiy/Papers/1467394/AI-Complete_AI-Hard_or_AI-Easy_Classification_of_Problems_in_Artificial
Another company doing interesting research is http://www.vouchsafe.com/play-games they actually use games designed to trick the RTT into training the RTT how to be more solvable by only humans!
Here's a great article on NP-Hard problems. I can see a huge possibility here: http://www.i-programmer.info/news/112-theory/3896-classic-nintendo-games-are-np-hard.html
I am trying to build a very user-friendly user interface for my site. The standard right now is to use client side as well as server side validation for forms. Right? I was wondering if I could just forgo client side validation, and rely simply on server side. The validation would be triggered on blur, and will use ajax.
To go one step ahead, I was also planning to save a particular field in the database if it has been validated as correct. Something like a real-time form update.
You see, I am totally new to programming. So I dont know if this approach can work practically. I mean, will there be speed or connection problems? Will it take toll on the server in case of high traffic? Will the site slow down on HTTPS?
Are there any site out there which have implemented this?
Also, the way I see it, I would need a separate PHP script for every field! Is there a shorter way?
What you want to do is very doable. In fact, this is the out-of-the-box functionality you would get if you were using JSF with a rich component framework like ICEfaces or PrimeFaces.
Like all web technology, being able to do it with one language means you can do it with others. I have written forms like you describe in PHP manually. It's a substantial amount of work, and when you're first getting started it will definitely be easiest with one script per field backing the form. As you get better, you will discover how you can include the field name in the request and back it down to one script for Ajax interactions per form. You can of course reduce the burden even further.
PHP frameworks may be able to make this process less onerous, but I haven't used them and would recommend you avoid them initially until you get your bearings. The magic that a system like Cake or Rails provides is very helpful but you have to understand the tradeoffs and the underlying technology or it will be very hard to build robust systems atop their abstractions.
Calculating the server toll is not intuitive. On the one hand, handling large submissions is more work than handling smaller ones. It may be that you are replacing one big request with several tiny ones for a net gain. It's going to depend on the kind of work you have to do with each form field. For example, auto completion is much more expensive than checking for a username already being taken, which is more expensive than (say) verifying that some string is actually a number or some other obvious validation.
Since you don't want to repeat yourself it's very tempting to put all your validation on one side or the other, but there are tradeoffs either way, and it is true that server-side validation is going to be slower than client-side. But the speed of client-side validation is no substitute for the fact that it will introduce security problems if you count on it. So my general approach is to do validation on the server-side, and if I have time, I will add it to the client side as well so as to improve responsiveness. (In point of fact, I actually start with validation in the database as much as possible, then in the server-side code, then client-side, because this way even if my app blows up I don't have invalid data sticking around to worry about).
It used to be that you could expect your site to run about 1/3 as fast under SSL. I don't have up-to-date numbers but it will always be more expensive than unencrypted. It's just plain more work. SSL setup is also not a great deal of fun. Most sites I've worked on either put the whole thing under SSL, or broke the site into some kind of shopping cart which was encrypted and left the rest alone. I would not spend undue energy trying to optimize this. If you need encryption, use it and get on with your day.
At your stage of the game I would not lose too much sleep over performance. Since you're totally new, focus on the learning process, try to implement the features that you think will be gratifying and aim for improvement. It's easy to obsess about performance, but you're not going to have the kind of traffic that will squash you for a long time, unless half the planet is going to want to buy your product and your site is extremely heavy and your host extremely weak. When it comes, you should profile your code and find where you are doing too much work and fix that, and you will get much further than if you try and design up front a performant system. You just don't have enough data yet to do that. And most servers these days are well beyond equipped to handle fairly heavy load—you're probably not going to have hundreds of visitors per second sustained in the near future, and it will take a lot more than that to bring down a $20 VPS running a fairly simple PHP site. Consider that one visitor a second works out to about 80,000 hits a day, you'd need 8 million hits a day to reach 100/second. You're not going to need a whole second to render a page unless you've done something stupid. Which we all do, a few times, when we're learning. :)
Good luck on your journey!
We're in the first steps of what will be a AJAX-based webapp where information and generated HTML will be sent backwards and forwards with the help of JSON/POST techniques.
We're able to get the data out quickly without putting to much load on the database with the help of a cache-layer that features memcached as well as disc-based cache. Besides that - what's essential to have in mind when designing AJAX heavy webapps?
Thanks a lot,
Probably the best thing to have in mind is that your app shouldn't be AJAX-based. It should work fine if the user's browser has scripts disabled. Only then should you start layering on AJAX. Stackoverflow is a great example of this. AJAX really improves the experience but it works when it's disabled.
Another thing I like to do is to use the same PHP validation functions for both server-side and client-side validation (as in sending an AJAX request to a script containing the same PHP function) to keep the amount of cross-language code duplication to a minimum.
Read up on Degradable AJAX.
Security for one. JavaScript has a pretty notoriously bad security profile.
These are the two that always get me:
What happens when the user clicks multiple items that may trigger multiple requests that may return out of order?
What happens when a request doesn't come back for one reason or another (timeout, server problem, etc.)? It always happens eventually, and the more gracefully your system fails the better.
So, it's been about 3 years since I wrote and went live with my company's main internet facing website. Originally written in php, I've since just been making minor changes here and there to progress the site as we've needed to.
I've wanted to rewrite it from the ground up in the last year or so and now, we want to add some major features so this is a perfect time.
The website in question is as close to a banking website as you'd get (without being a bank; sorry for the obscurity, but the less info I can give out, the better).
For the rewrite, I want to separate the presentation layer from the processing layer as much as I can. I want the end user to be stuck in a box and not be able to get out so to speak
(this is all because of PCI complacency, being PEN tested every 3 months, etc...)
So, being probed every 3 months has increasingly made me nervous. We haven't failed yet and there hasen't been a breach yet, but I want to make sure I continue to pass (as much as I can anyways)
So, I'm considering rewriting the presentation layer in Adobe Flex and do all the processing in PHP (effectively IMO, separating presentation from processing) - I would do all my normal form validation in flex (as opposed to javascript or php) and do my reads and writes to the db via php.
My questions are:
I know Flash has something like 99% market penetration - do people find this to be true? Has anyone seen on their own sites being in flash that someone couldn't access it?
Flash in general has come under alot of attacks about security and the like - i know this. I would use a swf encryptor - disable debugging (which i got snagged on once on a different application), continue to use https and any other means i can think of.
At the end of the day, everyone knows if someone wants in to the data bad enough, their going to find a ways in; i just wanna make it as difficult for them as i can.
Any thoughts are appreciated.
-Mario
There are always people who, for one reason or another, don't install the Flash plugin. Bear in mind that these are distinctly in the minority. Realize also that some people still refuse to enable Javascript. The question you have to ask yourself is whether this small group is enough to get you to move off of some newer technologies.
If the answer to that is yes, you will have to resort to vanilla HTML form processing, sending everything to the server for validation, etc.
If the answer is no, don't be afraid to use Flex. It works fine with https protocol, and is as secure as you want. That said, I wouldn't use it for username/password validation on the client; that information should always be encrypted and sent to a secure server. But validation of other types of field (phone number, etc.) shouldn't be a problem.
There are definitely people who don't have Flash installed and yes, there are people who have JavaScript disabled. But no matter whether you develop for the common denominator which is plain HTML forms or if you go high end, e.g. Flex or AJAX, never ever rely on the client to validate the inputs. It's a good first step, but everything that comes from the client, be it Flash or Ajax or Silverlight or whatever, could be forged.
I have to build a large form for users to fill out in order to apply for graduate study at the college I work for. There will be a large amount of information to collect (multiple addresses, personal information, business information, past school information, experience, etc...) and I want to know the best way to handle all this. I'm going to be using PHP and Javascript.
Are there any helpers or pieces of frameworks that I can use to help with the building/validation of the form, something I can just pop into my existing project?
Also would like any advice as far as keeping track of a large form and the resulting data.
You need to use multiple pages, and you need to include a mechanism whereby users can leave, and come back and fill out the rest of the form later (or if they're accidentally disconnected). Otherwise you're going to have all sorts of user issues, not due to your service, but because they're using computers and internet connections that are flaky, etc.
Survey software is probably a reasonable approximation of what you're doing, and there are survey packages for most PHP CMS's. Are you building this from scratch, or do you have an existing CMS underneath?
-Adam
A few tips, without knowing all the specifics of your form:
Don't show the user everything at once - this can be accomplished by multiple pages, or by selectively showing/hiding elements on the form as the user progresses through it. Provide contextual navigation that says "You're on step 3 of 10" so the user can get a sense of where they are in the form and how much effort is required to finish it.
Providing a mechanism to save and return later is a fantastic idea. If possible, provide a link to an email account of their choosing - you want to make this component as easy to use as possible, and requiring them to fill out an additional username/password to retrieve their data is just another barrier to completion.
Only ask for what you absolutely need. Yes, you're going to have to fight some political battles here - everyone wants as much as they can get. One way to combat this (especially effective when you have pressure from multiple groups) is to build out some prototypes: 1 with EVERYTHING and one with several sections reduced or removed. Have stakeholders from each group fill out both of them and measure their time to completion or roll-throughput yield. When you've got completion data, and they realize how much every other group is asking for (in addition to their group) they are easier to work with. In short, remove as much as possible - let the user go back later to provide more details if they wish.
Write down all your inputs on index cards and see how they logically fit together. More often than not you will find more efficient groupings or orderings. More than likely you will come up with much more usable ideas. This is extremely important when converting paper forms to online forms. Usability.gov has a fantastic case study on this topic.
A List Apart have an article on building sensible forms that is a good read
Why does the form need to be large on the first instance? Can't you trim it down to the bare essentials for the account and provide a way for them to come back later to flesh out the rest of the details?
For form validation, pop a gander on the jQuery validation plugin, Validation
Well I agree with Adam but I have some advise for you.
If I were you, I would create some virtual hidden tabs instaed of multiple forms with a next button.
You can create some which can control by javascript. First show the first one which will collect personal information like Name,Birthday,email, and etc... .
Once user filled them out and clicked on next button,hid this and show the other which will ask for other information like address and so on.
Once the whole dive compeleted, at the last div put a submit button which will submite the whole information to the server at once.
By why do so?
User will not get shocked becuase will not see a long form at each time and will fill out with patient.
You hit server at once;usually universtites and college's servers are too busy, you better design a form which hit the server least. This could count as performance tip.
Since you will submit the whole data at once, you would not worry about the issue that user will continue to fill out the other pages or not,so you will use less session which still will count as a performance tip.
This way makes your form more interesting and you can called you did something like Ajax.
You can add Javascript form validation to make it more user-friendly, but one thing you should never skimp on is the server-side validation... which has historically been awful in PHP.
One thing that'll make your life a million times easier here is the filter library, especially filter_input_array() since you can build the input validation programmatically instead of having to copy and paste a lot of checks. It takes some getting used to, but it's much, much better than the old way of doing things.