How do you work with forms in your web applications?

I am not talking about RESTful applications, I don't want to build heavy front-end using frameworks like Backbone.

For example, I need to add "contact us" form. I need to check data which was filled by user and tell him that his data was sent. Requirements:

  • I want to use AJAX.
  • I want to validate form on back-end side and don't want to duplicate the same code on front-end side.

I have my own solution, but it doesn't satisfy me. I make an AJAX request with serialized data on form submit and get response. The next is checking "Content-type" header.

  • html -> It means that errors with filling form are exists and response html is form with error labels. -> I will replace my form with response html.
  • json and response.error_code == 0 -> It means that form was successfully submited. -> I will show user notification about success.
  • json and response.error_code != 0 -> Something was broken on back-end (like connection with database).
  • other - I display the following message :

We have been notified and have started to work with that problem. Please, try it later.

The problem of that way is that I can't use it with forms that upload file.

What is your practise? What libraries and principles do you use?

  • 1
    you want front end validation too, its, not duplicated code its providing a better UX. – Ryathal Oct 12 '12 at 20:12
  • @Ryathal Having the same validations on the backend and the frontend may provide a better user experience but it is code duplication. – marco-fiset Oct 12 '12 at 20:13

For my hobby app, I'm using Java with the object validation framework known as JSR-303. Here's the link to my answer to a similar question on SO, but specific to that setup.


  1. When the Submit button is clicked, I gather form data and submit it via AJAX GET to my server-side validator.
  2. Validation happens behind the scenes, and the server pulls any error messages out of the validation response, packages them up, and sends them back to the client as JSON.
  3. When an error validation response shows up at the client, I apply and/or clear error styling from the appropriate form fields.
  4. When a success validation response shows up at the client, I do the normal form submit. At some point I'll change it to resubmit as AJAX.

I need to update the code at the linked answer, but that's the gist of it.

  • Thanks for your answer. How do you work with forms which have uploading file fields? – levalex Oct 12 '12 at 20:10
  • It doesn't support file fields right now. – Mike Partridge Oct 13 '12 at 1:47

First of all, you have to make sure that your form submission will work without AJAX. A lot of people browse the web with Javascript disabled, rendering useless any AJAX request (they won't work).

Then when you are satisfied with your form submission and validation, you can start to add fancy things like AJAX. jQuery (among others) is an awesome library that makes it very easy to write cross-browser compatible javascript. You might want to look into it as it supports AJAX and makes it very easy to work with.

What you have defined as your current mechanism seems to be ok. Maybe you can explain what you don't like about it?

  • Yes, I use jQuery for that and I wrote my own plugin for that forms, and it solve my issues for along time. I just want to know how other people solve the same problem, maybe more beatiful solution is exists. What's I really dislike is that I can't work with forms by that way which have uploading file. – levalex Oct 12 '12 at 20:08
  • @levalex Then you may want to edit your question to mention that you are having trouble with forms that upload files. If you do, your question will likely be migrated to stackoverflow, though. – marco-fiset Oct 12 '12 at 20:12
  • I have a policy not to be required to make anything compatible with IE (especially 6 which appears to not exist anymore :D) and a policy of requiring javascript. If users choose to disable it I'll still try to present a readable site but I am definitely not going to try to make it functional because they are ignorant of javascript – user2528 Oct 12 '12 at 20:15
  • Also according to this only 2% or less have it disabled developer.yahoo.com/blogs/ydn/posts/2010/10/… – user2528 Oct 12 '12 at 20:17
  • @acidzombie24 People that willingly disable Javascript do know about it. Otherwise they would not disable it. And 2% might represent a lot of users on a high traffic website. You don't want to lose these people because your site is broken. – marco-fiset Oct 12 '12 at 20:18

I never tried it but i heard of haxe which allows you to write code that is generated to js and works on the server http://haxe.org/doc/start/js but I do assume its not very good because i never heard of sites being built with haxe

It generates to php java and other languages http://haxe.org/doc/start


Your process does not look bad to me, and we have processed a lot of forms.

We use a custom Form library for our bespoke system which works very well for the simple applications of forms. You have to be careful though as something like this can quickly become restrictive (and worked around) from a design perspective.

Our application works mostly like yours, in that we post back the form, and replace the form again in the UI, but we send back a standardised xml response, which a generic jQuery library processes, part of the response is the replacement HTML.

The backend is object based, so we add controls to a Form object, and validation rules to controls. This gives us a very structured way of handling postbacks, and building forms with validation. Our client validation is built by exactly the same rules we feed into our form controls. On the server side all (most) form processing is handled in exactly the same solid standardised way.

check for postback -> get posted form -> check validates -> process

We don't have the library build the form as one block output (we have made this mistake before), it is far too restrictive from a design perspective, in basis this means don't have form->Render() output an entire form, rather have form->getControl('firstname')->Render() so that you can easily integrate with any required front end with custom interface between all form elements, we then further have macro’s that we can use in our template system to make prototyping faster: {frm1[firstname]}

We have standardised the response format, and the request mechanism, this means we have one javascript library for all of our purposes, we don’t have inline JavaScript for form processing everything is generic.

However, designers hate that they can’t see library generated forms in their HTML design tools. The macros help with this as they are at least visible as a place-holder.

We handle file upload fields in an iframe. It gives the impression that an ajax file post is occurring, even if it is not. Remember so long as you are not cross domain you can use JavaScript to communicate between parent and iframe.

EDIT Worth mentioning that all forms are valid HTML forms, they are improved by Javascript when it is available, again the library is standardised.

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