Validation Headaches

Greetings. I have been trying to learn the proper way to validate a webform using best practices and methods. I’ve learned that to do this properly, both server-side and client side must be used to ensure proper data submission and for security issues.

However, I am to the point of tearing my hair out, and this is why. First of all, I’m very much a ‘front-end’ person. I can do some coding, but not much. This is why I’m trying to learn. I’ve found quite a few tutorials online, however they seem to use one method or the other, and if it’s true that both methods need to be used, this isn’t helpful. Secondly, when using javascript you can prompt users towards errors and such, all without needing to load separate pages for errors and to let the user know their data was submitted successfully (I’ve learned that using separate pages for this is not the best solution and frowned upon.). The reason why this has me so irritated is that I’m building a single page site, and it makes no sense at all to use PHP when it requires separate pages.

So therefore, if one goes to the trouble of writing javascript validation to prevent loading separate pages, why in the hell would you need to re-validate the data with PHP seeing as it requires separate pages. If you create a PHP script with no echos or headers, then you get a blank page, otherwise you get black text on a white background. What the hell do you do with the errors in server-side, since the whole concept was to deal with those client-side.

The benefits the user gains by a designer using client-side validation seem to fly right out the window if server-side validation is used also. It seems to defeat the whole purpose of client-side validation? :mad:

In case some of you are confused as to my problem, here is an example.

  1. User inputs data, and submits.
  2. If errors are found, an error div or multiple prompts direct the user to correct the errors on the same page near the form, otherwise the data is submitted, and success div is displayed.
  3. Correct data is submitted to php file (if validation exists, how do I handle the errors, and in a manner that doesn’t make the client-side error correction pointless) and sent to the website owner’s email.

I seriously need help, and any suggestions or tutorials or other information would be greatly appreciated. Please remember though I’m a programming noob, and very right-brained.

You can have PHP echo out anything you want.
Error messages, codes, complete divs, whatever.
It depends on what you need to have the JS on the client side display what you want.

Could you explain (at least briefly) how to do this with PHP?

otherwise the data is submitted, and success div is displayed.

I guess the data is submitted using AJAX?
If so, don’t just display the success div, but have the PHP script return the result and use that to decide what to display (a success div, an error, whatever).

I guess I’m not being clear, if so I apologize.

What I need to know since I have a single page site, is there a way to use PHP server-side validation without requiring separate pages for errors and success?

Then why did you ask

So therefore, if one goes to the trouble of writing javascript validation to prevent loading separate pages, why in the hell would you need to re-validate the data with PHP seeing as it requires separate pages.

if you already knew the answer?

Thanks for the reply, however I already knew this. What I want to know is what do you do with the errors that might be generated when using server-side validation. Normally when using a simple echo, the PHP spits out black text on a white background, or when using nothing, you simply get a blank page?

Is there a way to validate without the user knowing they’ve submitted errors, especially since they have already dealt with error correction during the client-side validation?

I think this will help to you » jQuery plugin: Validation

Essentially, if user input data is going into a database of some kind then server side validation is a “must do” and client side validation (javascript) is optional.

The reason being that javascript validation can be easily bypassed by:

  1. turning javascript off in the browser.

  2. submitting bogus data using either GET or POST directly to the page processing the form data without using the input form at all.

You cannot stop users from doing 1 and/or 2 above.

So in summary, if data integrity/security is an issue (whether user inputs are going into a database or not) then you must do server side validation and client side validation is used solely to optionally provide instant feedback to users.

I really hate making forms. I’ve been using for the past couple years instead of hacking together my own forms. I use Wufoo for the contact form on rocket web for example.

With all due respect Guido, that doesn’t help me any. Perhaps you might point me to a tutorial or something. I obviously understand that this can be done with Javascript and PHP, but my question is HOW?

It’s a gigantic pain, if and when the people at Microsoft pull their heads out of their ***** and make Internet Explorer HTML5 compliant as far as the built in validation support, we will all be better off. Internet Explorer is constantly holding back web design and development.

I will take a look at Wufoo, but I really like being self-sufficient which is why I’m trying to learn this stuff.

Because you have a 1 page site, and don’t want to show separate pages for errors and succes, you have two options:

  • send the form to the same page and add the php code that validates the form data, sends the mail (if no errors are found) and displays the entire page again with succes message or error messages at the right places.
  • use AJAX: send the form data to a php script using ajax, and then act upon the result sent back by the php script. The easiest way would be (IMO) to have the php script return the entire form including succes message or error messages and change the innerHTML of the form element that contains the form.

If you need it, here’s an intro in the basics of AJAX.

If you need help with the first option, just post your code and we’ll surely be able to point you in the right direction.