Same Page Form Feedback in Fashion with ECMAScript

  • Filter
  • Time
  • Show
Clear All
new posts

    Same Page Form Feedback in Fashion with ECMAScript

    In life things come and go out of fashion. You know that very well with clothes. The same thing happens in website design, but it may not be apparent to the ordinary Internet user. One of the things that have been in fashion in website design is Same Page Form Feedback. I explain what that means below. You can do it with PHP, Perl or ECMAScript. In this article, I introduce you to a tutorial on Same Page Form Feedback with ECMAScript. Note: ECMAScript and JavaScript are languages that do the same things.

    The Obvious Way to produce Feedback for an HTML Form using ECMAScript
    Consider a situation, where a user fills a form and clicks the Submit button. The data of the form has to be sent to the server. Before the form data is sent to the server, ECMAScript (JavaScript) can validate the datum of each form field. If there are errors, it displays one alert box, with all the error messages.

    Problem with the Obvious Approach
    In an HTML Form, about 5 fields may need feedback. This means about 5 error messages can be displayed in an alert box. As soon as the user clicks the OK button of the alert box, the error messages disappear and the user is not in position to remember which error message was for which field, in order to make correction.

    Conventional Solution
    It is more convenient for the ECMAScript to validate the fields one-by-one; then for each field, wrongly typed, it displays the corresponding error message in an alert box. That is alright and accepted without questions, by everybody.

    Same Page Form Feedback in Fashion
    The fashionable way to do that today is to display the feedback correction or error message of each field, just above the top of the field. The message for each field is in a conspicuous color (e.g. red).

    I have already prepared a tutorial that explains how to produce Same Page Form Feedback in Fashion with ECMAScript. The tutorial has been written in a step-by-step fashion. The code samples are well formatted with good indentation, making readability very easy. There is no missing special character, as you would find in other sites. The links to the different parts of the series are easily accessible. Click the following link to start the tutorial:

    Same Page Form Feedback in Fashion with ECMAScript (JavaScript)