How can I manage the definition, presentation, validation and storage of HTML form fields from one place?

Question

I want to be able to define everything about the form field in one place, and not have some information in the database, some in HTML, some in JavaScript, some in ASP ...

Why do I have to worry about the possibility of change in four separate places (or more) when I want to change something in one field?

Ie, I do not want:

• declare a field in the database
• and duplicate some of this information in HTML somewhere
• and duplicate some additional information in some kind of javascript somewhere
• and duplicate some additional information in some ASP somewhere

Since I am a developer, I am ideally looking for a methodology, not a tool or S / W package. (I think!)

Currently , I am doing this by putting all the control information in the text area of ​​the SQL extended property "Description". For example, the following SQL declaration will be shown in the required phone number field:

[home_phone] [varchar](15) NOT NULL

and I added the following controls to the extended description property:

["Home Phone"][phone_text][user_edit][required][allow_na][form_field_size_equals_size][default=""][group="home_address"][rollover="enter only: numbers, dash, parenthesis, space"][explanation="enter <strong>n/a</strong> if you don't have a home phone"]

In my current system, the following HTML is dynamically generated for the Home Phone field:

 <div class="div-item" id="item-FORM:FIELD:TABLE_HOME:HOME_PHONE"> <div class="div-item-description" id="item_description-FORM:FIELD:TABLE_HOME:HOME_PHONE"> <span class="rollover-explanation" title="enter only: numbers, dash, parenthesis, space"> <label for="FORM:FIELD:TABLE_HOME:HOME_PHONE" id="item_label-FORM:FIELD:TABLE_HOME:HOME_PHONE"> Home Phone </label> </span> </div> <div class="div-item-stipulation" id="item_stipulation-FORM:FIELD:TABLE_HOME:HOME_PHONE"> <span class="stipulation-required" id="item_stipulation_span-FORM:FIELD:TABLE_HOME:HOME_PHONE" title="required" > * </span> </div> <div class="div-item-value" id="item_value-FORM:FIELD:TABLE_HOME:HOME_PHONE"> <div class="individual-forms"> <form class="individual-forms" id="FORM:TABLE_HOME:HOME_PHONE" name="FORM:TABLE_HOME:HOME_PHONE" action="" method="post" enctype="multipart/form-data" onsubmit="return(false);"> <div class="individual-forms-element"> <input class="" type="text" id="FORM:FIELD:TABLE_HOME:HOME_PHONE" name="FORM:FIELD:TABLE_HOME:HOME_PHONE" size="15" maxlength="15" value="" FORM_control="true" FORM_control_name="Home Phone" FORM_control_is_required="true" FORM_control_is_phone_text="true" > </div> </form> </div> </div> <span class="spanExplanation"> enter <strong>n/a</strong> if you don't have a home phone </span> </div> 

which looks like this (in IE 7):

JavaScript-based client-side validation is controlled by **FORM_control**... parameters, which, when an error **FORM_control**... , generate explanations and highlight fields. (Unfortunately, custom parameters in HTML elements are not standards compliant.)

My main problem is that this method, using the Description field, has always been cumbersome to use and maintain. The Description property can only contain 255 characters, so I have a lot of abbreviations. As the system expands, the number of controls has also expanded significantly over the past ten or so. And my code for interpreting all these controls and their abbreviations is simply not good or effective. And, as I said, custom parameters in HTML elements do not work in FireFox.

I am currently in control (and want to continue to control):

• Field description (for example, "Home phone number")
• DB table name (for example, "home_address")
• DB field name (for example, "home_phone")
• Type and size of the database field
• DB allows null
• Grouping (for example, this particular field is part of all the Home fields).
• Mandatory / optional
• Read only (for system data)
• Size (submitted form field size)
• Type (e.g. text, number, alpha, selection, zip code, phone, address, name, date, etc.)
• Accepted input (not empty, only numeric, without spaces, phone number, reg exp, etc.)
• Extended explanation (for example, for phone # "enter n / a if you do not have a home phone")
• Explanation to collapse (for example, for phone # "enter only: numbers, dashes, brackets, space")
• Lines (for favorite lists - 1 = drop-down list)
• Rows / Columns (for text areas)
• Error message text
• Error indication (how to show which field contains an error, for example, a red background)
• Etc ...

And to be clear, I'm all for separating logic and design elements. I have a separate CSS file that is manually maintained (not part of the generation process).

My server environment is the classic (non .Net) ASP and SQL 2008. I am pretty good at HTML, CSS, JavaScript and ASP, and I like SQL.

I think what I want is some kind of JSON, XML, etc., which is the only source used to generate everything, for example:

• SQL script that actually creates SQL tables
• HTML (with CSS classes and client-side reviews / calls on the client side)
• ASP (server side validation)

My current method that does this is dynamic (not compiled) and rather slow, so I'm probably looking for some kind of “compiler” that generates this stuff once. And I really only have classic ASP, JavaScript, or SQL as the available languages ​​for this “compiler”.

And although I think I can create this system myself, I hope that other, better developers have already come up with something similar.

Suppose this should scale for at least a few fields. (FYI, my current form has too many fields on one page, but I solve this problem separately.)

Thanks for any help!

Answer 1

Javascript validation is overrated

I believe javascript validation is overrated. This was good in those days when a server round could take 10 seconds, but usually it could take less than 3 seconds. In your factor, during the AJAX submission process, you can bring this time to the second second.

In response to all these efforts, in order to abandon the round trip, you must deal with all the difficulties of cross-browser support, complicated debugging, lack of registration on the server side and consideration of the case when JS is disconnected by the User. In a typical scenario, we are talking about a lot of wasted hours and complicated debugging (try asking the typical idiot which browser they use, not to mention which version they use).

Database as a universal validator

You said that the database is not a complete validation environment, but I think this is no longer the case. A modern database, such as PostgreSQL, will allow you to connect complex validation functions as triggers to a large extent in your chosen language and return appropriate error responses to the application.

So, if you follow where I'm going, you can check in one place, in the database, without historical flaws. Process:

• Create a basic HTML form, forget HTML5 Validation or Javascript.
• When the form is completed or as required, send it via AJAX (if available) or standard POST if not.
• Pass UPDATE / INSERT more or less directly to the database, where the trigger functions are normalized and confirm the data.
• Return the result and errors immediately (possibly through a transaction), and execute any additional processing server at this stage. if you decide not to store data that you can either delete a new line or roll back a transaction.
• In conclusion, return any appropriate redirects, messages, or browser updates via JSON / AJAX or reload the cleared data.

This may sound slow / inefficient, but I think that ignoring today's realities, namely:

• Almost everything is broadband, even wireless.
• Processing power is cheaper than development time.
• These types of updates are usually limited to users who can fill out forms; you are not going to hammer your database in a typical scenario.
• You still need to check, so why not the database?

And the benefits are huge:

• On a server with large volumes (for example, exchange, twitter, feed, etc.), the process is subject to API control via SOAP / AJAX / RSS / since only a thin layer is required to transfer data between the API client and the database.
• No matter which language or protocol client the validation remains the same.
• Even the original SQL statement gets that can cause programming errors, damaged import or third-party channels from destroying your data structures.
• Triggers easily switch if required. In regular code, it is often more complicated.
• Validation is always consistent.
• Validation functions are located inside the database, which then allows access to indexes and other rows or tables without the overhead of connectors, data conversion, and network / socket latency.
• Validation functions can be executed in compiled code, even if your network server language is dynamic.

The only real disadvantages are:

• It is difficult to upgrade or upgrade to other database software.
• It is difficult if your preferred language is not supported (however Postgres supports functions written in C, PL / pgSQL, Python, TCL, Perl, Java, R, Ruby, Scheme, Bash and PHP, so if you are not stuck in C # / VB you should find one that you can process).

Context sensitivity

There are some aspects of your question that I would not recommend at all. First of all, when you try to associate a presentation of HTML form objects with your data in one place.

This idea will have unpleasant consequences, because you will find that in a typical application the presentation of information is very sensitive to the context - in particular, to the target audience.

For example, in an ordering system, you may have data entered by a customer, which is then available to the administrator. Viewing client data may be more limited, it may require a different title and description, it may be preferable to display it as check boxes, while the administrator gets a more compact view. You can even provide the same data for different types of customers (retail and wholesale).

In short, the presentation of data should generally be more fluid than checking it, so at some point you should really draw a line, even if it means some repetition.

Answer 2

I am working on the same issue at my work. I cannot repeat myself, especially because I know that when I have to change something in a few months, I will never remember all the scattered redundant parts. The answer must take into account the following truths:

• The database should, as far as reasonably possible, verify itself. This is basic data integrity; The database should throw a fit if you are trying to put invalid data into it.

• The database cannot verify itself. It is easy to add restrictions for uniqueness, format, or foreign keys, and technically SQL can go much further, but if you perform, say, address / postcode matching at the database level, you will regret it, Some part of the validation logic should correspond to the server code. In your case and mine, this means ASP.

• If you want to check on the client side, this means Javascript.

At this point, we are already talking about the limitations of validation in three languages, and the mismatch of the impedance between them can be significant. You cannot always validate one of them. All you can do is reduce logic as much as possible.

The solution you offer has one gigantic advantage - all logic is in one place together. This advantage is balanced by several disadvantages:

• You cannot perform any check at all without talking to the database.

• To get metadata from the database into your ASP, you must have special code to interpret the minimum metadata language. This is much more complicated than accepting some degree of redundancy.

• Your metadata puts the display interface code in your database. This means that if you want to change the text, you need to change your database model. This is a fairly radical requirement that links your database model with your presentation logic. In addition, internationalization is almost impossible.

• Since there are so many translation layers between your metadata and the user, any expansion of your metadata space will require reconsideration of several layers of closely related code.

To try to find an intermediate point between your decision and redundancy, which he urged to avoid, I suggest the following:

• Put the basic validation constraints in the database.

• Create a system in ASP to define a behavior data model with arbitrary content and validation constraints. When you define your model using this syntax, you will duplicate only the limited constraints in the database.

• Create a system in ASP to display form fields on a page in HTML. A form field declaration will refer to the corresponding data model and additionally include a display code, such as labels and descriptive text. HTML generation code can use reasonable default values ​​derived from a data model. The only duplicate data should be the name of the field, which is used as a key to bind the displayed field to the corresponding data model.

• Create or find the Javascript validation library. The above HTML generation code automatically inserts hooks into this library in the generated markup based on the corresponding data model.

Thus, you have a system in which information about the field can be stored in several places, depending on where it is most suitable, but almost never duplicated. Validation information is declared in the ASP data model. The displayed information is displayed only in the field declaration on the page. The field name is used throughout this stack as a key to combine them, and the problem hierarchy allows you to redefine assumptions made at lower levels as needed.

I am still working on my implementation of this project, but if you are interested, I can post some code examples.

Answer 3

It seems to me that this state is against every principle of separation of logic and design elements. I know that in the large projects that I worked on, there were real SDLC requirements that dictated one type of engineer that could touch one file level, while a user engineer could touch another, and the “monkey code” could only touch subsets of this. Could you imagine the chaos that will arise in this scenario? Codex monkeys will need to obtain permission from the UI Engineer, who, in turn, will have to coordinate with an engineer who would have to join the integration conference call, who would have to support ping technical support, which would then delay the project until until the business requires legal ....

All jokes aside, I don’t think your method is bad.

I really believe in handling things, since they had to be handled initially, i.e. creating a text field of a form is most likely more efficiently processed by html initially than by database calls, which then build html through a series of scripts. Your "compiled" method makes me wonder if it will undo the benefits of caching common javascript and css elements in their respective files.

There are frameworks like Zend, CodeIgniter, and Symfony (on the PHP side) that come close to what you mention with the built-in functions ... although they aren't there yet. Zend, in particular, uses program functions to create, validate, and style forms, and once you figure out its nuances, it is powerful enough. Perhaps this may serve as a model for your final quest. Although it seems like you are a classic asp guy ... and that is not what you are looking for. I'm distracted.

Answer 4

I think this question is beyond the scope of my knowledge, but I believe that this will not hurt to try and help.

I am working on my first PHP site, and from the very beginning, since I could not predict many factors of the site and only be one person, I decided from the very beginning that each design element on each page will be supported in one page. This is a learning experience so I’m not too worried that there wasn’t much planning, but some things just grind my mechanisms, such as naming conventions, but with my method I can always easily change the site.

Each page I make is structured as follows:

 <?php require_once 'constants.php'; ?> <?php $pageTitle = 'Home Page'; ?> <?php require_once REF_LAYOUT_TOP; ?> <h1>Hello!</h1> <p>World</p> <?php require_once REF_LAYOUT_BOTTOM; ?> 

In constants, I have constants for almost everything. CSS colors (for consistent layout), directory locations, database connections, links, constants only for certain pages (so I can change the file names and not put them on anything) and all kinds of things.

The upper part contains navigation, error handling of JavaScript scripts, any dynamically created content, navigation, etc.

That way, if I ever want to implement something new, it will be implemented everywhere. I gave jQuery a shot and it only required one link.

Possible Solution

If you are trying to configure many things from one place, I highly recommend that you invest in a little knowledge of PHP. Since PHP is just a script server, it only prints text. In other words, you can embed PHP in JavaScript, HTML, and anywhere. So you can customize the same text for tooltips. I do not know if ASP will stop you from doing this (I do not know about this).

I believe that most sites should be built this way. It has to be ... how else can they support hundreds of pages? I think this is the most logical and semantically correct.

Answer 5

I am not familiar with ASP, so I will talk in general, not knowing how they are implemented.

Typically, a form is the information necessary to create, edit, or delete an object. So I would start with the Entity class. In other architectures, this is commonly referred to as a model (as in Model-View-Controller). The Entity class defines what information it needs, and it takes care of database queries.

A form can be built directly from Entity. , , , , , 0 255. , , .

- , . HTML, Javascript , .

. . , . , , , . , , .

, , . , , , Javascript , , Entity.

, , . , , , , " n/a, ", , .

Type . validate() true, . (, "n/a" ), .

, . id , , "", , . .

Answer 6

XML. CRUD, XML- ( ). CRUD , CSV CSV . , , , CRUD . FK, INSERT UPDATE, , . DATE, . Java EE jsp. , php.

 <schema> <tableName>xtblPersonnel</tableName> <tableTitle>Personnel</tableTitle> <tableConstraints></tableConstraints> <!-- COLUMNS ====================================== --> <column> <name>PID</name> <type>VARCHAR2</type> <size>9</size> <label>Badge ID</label> </column> <column> <name>PCLASS</name> <type>VARCHAR2</type> <size>329</size> <label>Classification</label> </column> <column> <name>PFOREMAN</name> <type>VARCHAR2</type> <size>9</size> <label>Foreman Badge</label> </column> <column> <name>REGDATE</name> <type>DATE</type> <size>10</size> <label>Registration Date</label> </column> <column> <name>PISEDITOR</name> <type>VARCHAR2</type> <size>3</size> <label>Is Editor?</label> <help>0=No</help> <help>1=Yes</help> </column> <column> <name>PHOME</name> <type>VARCHAR2</type> <size>9</size> <label>Home?</label> </column> <column> <name>PNOTE</name> <type>VARCHAR2</type> <size>35</size> <label>Employee Notes</label> </column> <!-- Primary Keys ====================================== --> <!-- The Primary Key type can be timestamp, enter, or a sequence name) --> <primaryKey> <name>PID</name> <type>enter</type> </primaryKey> <!-- FOREIGN KEYS ====================================== --> <!-- The Foreign Key table is the lookup table using the Key to retreive the Label --> <foreignKey> <name>PID</name> <table>phonebook</table> <key>badge</key> <label>lname</label> </foreignKey> </schema> 

Answer 7

Bravo! , , . RAD (Rapid Application Development).

, , , " " " ". , , , , .. , . , .

, RAD . , . . , ? , !

, " " , RAD- - : . , , .NET, Java .

, , , ASP HTML-, . , , voila!, .

"" , . , "" . , , , , , .

, . : (1) , (2) , , , (3) , (4) , , , - ,;)