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).

Answer 2

Something like this would work on your numeric stuff to check if it's a number, you may need to do this for every element. Regex is not my thing but you can search for the needed regexs on the web or use the w3c js example to build your own. w3c js regex

$( "#totalRetryCount" ).blur( function()
{

var value = $("#totalRetryCount").val();

if( isNaN( value ) )
{
// unhide your error message code or tool tip etc... code here
}
else
{
    alert("it's a number!");
}

} );