Question

Please help me to refactore this Javascript code. There is big form for scheduled message sending(send date, reccurence type, end by date/qauntity, credits system – need to count total cost of scheduled sending plan in runtime). I’m writing Javascript validator for this form.

There is an validation algorithm 1) check if send date time is not in past moment 2) check if ‘end by date’ field time is greater then first send date time 3) validate total cost of schedule plan

(There about 6 steps, but I just write here 3 of them – I think it will be enough to grasp the problem)

‘Save scheduled plan’ button has a javascript listener on ‘click’ event. This listener calls this function:

ScheduledValidator.checkIfSendDateTimeIsNotInPast(params, form); 

Here is it its declaration:

ScheduledValidator.checkIfSendDateTimeIsNotInPast = function (params, form) {     var conn = new Ext.data.Connection();      conn.request({         url: CONST.BASE_URL + 'url',         params: params,         callback: function (options, success, response) {             response = Ext.util.JSON.decode(response.responseText);             if (response.success == false) {                 // display error messages             } else {                  ScheduledValidator.checkIfEndDateIsGreaterThatSendDate(params, form);             }         }     }); } 

We have nested request later:

ScheduledValidator.checkIfEndDateIsGreaterThatSendDate = function (params, form) { var conn = new Ext.data.Connection();  conn.request({     url: CONST.BASE_URL + 'url2',     params: params,     messageForm: form,     callback: function (options, success, response) {         response = Ext.util.JSON.decode(response.responseText);         if (response.success == false) {             // display error messages         } else {             ScheduledValidator.validateTotalCost(params, form);         }     } }); } 

and one more here:

ScheduledValidator.validateTotalCost = function (params, form) { ... 

I don’t like in that approach, that it is quite hard to understand the algorithm at first glance. Maybe it is not good, to make many(about 6) nested AJAX queries for validation of single form? Maybe it should be merged to the single request and after that we will do all the validation activities at server side? How should I refactor this code?

Answer 1

I suggest you zoom out and evaluate how the form process and user experience works before refactoring your code.

For instance, is it necessary to give feedback to the user immediately when inputting dates? Can it wait until she’s completed filling out the form? If so, you can just use a regular form post, validate the submission server-side, and return feedback.

If not, and the experience requires immediate feedback, you may want to look into creating a generic wrapper around your implementation to handle form validation. This can be done manually, or you can look around on Google for form validation mechanisms that allow you define specific URLs and callbacks, per your needs.

A third option could be to do the validation client-side without contacting the server. Determine whether your logic can be done in Javascript (most likely, if it involves date calculations, this shouldn’t be too hard) and try to add a layer that does that for you so you don’t need to contact the server in the first place. Bonus: depending on how fast your server side code responds, this could actually improve the user experience (However, remember that server-side validation is still a must!).

From the example use case you gave in your question, it sounds like my former suggestion applies — namely that it’s not entirely necessary to be so immediate in your feedback on whether the form is being filled out correctly. If my understanding of your situation is correct, I would advise starting the refactoring process by removing the AJAX calls and having it work as a normal form, and then adding in client-side-only validation once that works.