Making simple forms in web applications [closed]

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?

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.

Overview:

When the Submit button is clicked, I gather form data and submit it via AJAX GET to my server-side validator.
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.
When an error validation response shows up at the client, I apply and/or clear error styling from the appropriate form fields.
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.

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?

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.

Filed under: softwareengineering - @ 00:49

Thẻ: forms, json, web-development

Thiết kế website giá rẻ

Danh mục

Making simple forms in web applications [closed]