how to validate form when user goes to next element?

Question

can you please tell me how to validate form when user goes to next element ?.I saw a demo http://jquerytools.org/documentation/validator/ in which user press submit button and get alert message in from of field .

can we get when user switch to another element ?

In my demo First field is "number" .If user enter "string" and goes to next it gives error . Same second is number .If user enter "string" and goes to next it gives error

Here is fiddle http://jsfiddle.net/M27F2/2/

$("#myform").dform(
 {
  "elements": [
    {
      "html": [
        {
          "html": [
            {
              "type": "number",
              "id": "totalRetryCount",
              "name": "totalRetryCount",
              "required": false,
              "value": 0,
              "tabindex": 1,
              "onblur": "validateElement('Configuration', 'testSuiteConfigurationform','totalRetryCount')"
            }
          ],
          "type": "fieldset",
          "caption": "Total Retry Count"
        },
        {
          "html": [
            {
              "type": "number",
              "id": "totalRepeatCount",
              "name": "totalRepeatCount",
              "required": false,
              "value": 0,
              "tabindex": 2,
              "onblur": "validateElement('Configuration', 'testSuiteConfigurationform','totalRepeatCount')"
            }
          ],
          "type": "fieldset",
          "caption": "Total Repeat Count"
        },
        {
          "html": [
            {
              "type": "select",
              "options": {
                "true": "true",
                "false": "false"
              },
              "id": "summaryReportRequired",
              "name": "summaryReportRequired",
              "required": false,
              "value": "true",
              "tabindex": 3,
              "onblur": "validateElement('Configuration', 'testSuiteConfigurationform','summaryReportRequired')"
            }
          ],
          "type": "fieldset",
          "caption": "Summary Report Required"
        },
        {
          "html": [
            {
              "type": "select",
              "options": {
                "ALWAYS": "ALWAYS",
                "ON_SUCCESS": "ON_SUCCESS"
              },
              "id": "postConditionExecution",
              "name": "postConditionExecution",
              "required": false,
              "value": "ON_SUCCESS",
              "tabindex": 4,
              "onblur": "validateElement('Configuration', 'testSuiteConfigurationform','postConditionExecution')"
            }
          ],
          "type": "fieldset",
          "caption": "Post Condition Execution"
        }
      ],
      "type": "div",
      "class": "inputDiv",
      "caption": "<h3>Configuration Parameters</h3>"
    }
  ],
  "id": "testSuiteConfigurationform",
  "name": "testSuiteConfigurationform",
  "method": "post"
}
);

Answer 1

You can register a function on 'blur()' of the element. This function will be called when the element looses focus. In this function, you can make an AJAX call to server and validate the data over there. Based on the server response you can change the HTML of the page to show appropriate error message(if any).