This is my second post in a series of 52 (yes, yes I've delayed a lot but I would prefer later, better posts than useless, on-time posts).
Forms are something that I end up coding on almost every website I make (without using a CMS, that is). Essentially, while making a form I have to:
- Write HTML code for the forms giving appropriate names and ids.
- Write PHP code that reads in these names from POST or GET and then filter them.
- Create appropriate error messages in PHP based on incorrect data provided in forms, and repopulate correctly filled fields in the form for the sanity of users.
- Write Javascript (or use a plugin from jQuery) to validate the fields inline using the exact same rules and show messages to users before submitting the form.
- Debug because I missed a character or capitalized something I shouldn't have.
- And then I realize I missed something, and then repeat.
This is also known as web developer hell. Somewhere near the inner circles.
Ideally, what would I want to do to get a form ready?
Specify what I want at one single place with some convenient format (— did anyone say JSON?)
So essentially, this post covers:
- Specifying a (modifiable) JSON format for forms.
- Generating HTML using PHP for those forms.
- Generating rules in PHP using this format.
- Generating javascript for validation using this format.
Building the specification:
Call it a whim or a fancy — I want to use JSON for my specifications. I cannot think of any other more convenient format for specifying data to be used in PHP and Javascript.
Let's take a look at all available form elements:
- input tags:
- button
- checkbox
- file
- hidden
- image
- password
- radio
- reset
- text
- submit
I'll only be taking a look at the types highlighted in bold text.
- textarea
- select
- option
- optgroup
- button
The specification as it is now
[{
'name' : '[form-name]' //Name and id of the form to be created.
'class' : '[ '[class1]', ... ]'
}, ...]
What do I need to specify for the form?
- The form structure — the JSON spec must follow the structure that the form will take. Specifying a contents array seems to be the best possible solution to that, allowing and defining fieldsets for forms nested inside forms.
[{ 'name' : '[form-name]', 'contents' : [ { 'name' : '[fieldset-name]', 'legend' : '[fieldset-legend]', 'class' : '[ '[class1]', ... ]' 'contents' : [ ... ] } ] }, ...] - So now we get down to the meaty part. Defining elements. Each element is an object with a type, name, label, an array each for attributes and classes, and an array for validation data.
[{ 'name' : '[form-name]', 'caption' : '[form-caption]', 'class' : '[ '[class1]', ... ]' 'contents' : [ { 'name' : '[fieldset-name]', 'legend' : '[fieldset-legend]', 'contents' : [ { 'type' : 'input-text', 'name' : '[name and id of the object]', 'label': '[its label. duh.]', 'attr' : [ '[attr-name]' : '[value]' , ... ], 'class': [ '[class1]', '[class2]' ], 'rules': [ ... ] } ] } ] }, ...]
To be continued.
Recent Comments