server side client side field state altertions

I've seen some variations of this question throughout stackoverflow, but I have a specific use case I'd appriciate inputs for.

The simplest I can get this to is: 1. On a web site, I have a form with two input fields. When A is populated with 'XYZ' B should be disabled, in all other cases it should be enabled. 2. This "page" can also be saved to the a DB by the client.

So, I need to be able to render the 2nd disabled field both at client tab-out (easy, simple Javascript) and when this "form" is firsy being loaded (Simple, in JSP manipulate the field's attribute when the page is loaded).

But... I ended up having the exact same logic coded in two place. Now, consider this is required for hundreds of fields and tens of logical cond开发者_开发知识库itions, some times as complex as combination of 5 fields together, set of specific values to do this or that, etc. etc..

Bottom line , what approach would you consider to reuse (as much as possible) UI oriented validaion/field state alterations between server side and client side (cosider that I do not want to use AJAX call with every user typing in a field.).

Thanks

A component based MVC framework like JSF (JavaServer Faces) allows you to define that in a single place. Here's a kickoff example of the particular use case:

<h:form>
    <h:panelGroup id="inputA">
        <h:inputText value="#{bean.inputA}">
            <f:ajax event="blur" render="inputB" />
        </h:inputText>
    </h:panelGroup>
    <h:panelGroup id="inputB">
        <h:inputText value="#{bean.inputB}" disabled="#{bean.inputA != 'XYZ'}" />
    </h:panelGroup>
</h:form>

That's basically all. Only the javabean code is omitted, but that's not so relevant here. True, ajax is used here, but that's partcularly cheap and there's basically no other way to keep the same state on both the server and client side anyway.

The above XHTML (Facelets) example will generate the appropriate HTML/JS code which will do the work at both server and client side. The only disadvantage is maybe the learning curve and lot of changes in existing pages.

My answer would be much the same a BalusC's.

But first a clarification of terminology: If all you are doing is enabling/disabling an HTML field, we would typically say that is client side validation, regardless of whether it is done in Javascript or JSP. Yes, in the JSP case the logic to disable/enable the fields runs on the server, but since all it is doing is setting a field for the client to display, it tends to fall into the general description of "client side validation"

The alternative (well actually 'in addition to') to client side validation is to validate the form fields when they get POSTed to the server. That checks that the client has actually obeyed your validation rules (e.g. they might disable javascript, or they might use a tool like firebug to re-enable the field you disabled, etc.)

You may well know all of that already, and terminology isn't super important, but I thought it was worth pointing out.

Now, back to your question. I would do it all in javascript, and ignore the logic in the JSP. All you need to do is take the piece of javascript that fires when they tab out of "A", and run it when the page loads.

In JQuery, you'd do something like (untested)

var check_field = function(f)
{
  if(!f) f=$(this);
  if(f.val()=='XYZ') $("#field_B").attr('disabled', true);
  else               $("#field_B").attr('disabled', false);
};
$(function()
{
   var a = $("#field_A");
   check_field(a);
   a.blur( check_field );
});