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 . enter image description here

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"
}
);

@GarySchreiner, how can this question about jQuery Tools be a duplicate of a question about a totally different plugin? — Sparky, May 10 '14 at 03:08
@Sparky You're right, I just noticed that he's using dform instead of validate before you posted your comment. My mistake. — Gary Schreiner, May 10 '14 at 03:10
http://jsfiddle.net/M27F2/4/ in that validateElement not defined display ..but i already defined function ..is it taking strng — , May 10 '14 at 03:15
IMO, jQuery Tools is total garbage, poorly maintained, developer goes AWOL for years at a time. Look into jqueryvalidation.org — Sparky, May 10 '14 at 03:27
@Sparky yes but I can use jquery validation also that why i insert that in my this fiddle http://jsfiddle.net/M27F2/4/ but I ma getting error — , May 10 '14 at 03:31
use $().on('change', function() {} ) to validate the element once you click a new one if thats what your looking for. Add your validation code and element. Alternatively you can do 'keyup' to do it as they type. 'change' works when the focus of the input box switches. — user3587554, May 10 '14 at 03:57
I've never used dform. my example is plain jquery. to validate write a regex pattern to perform on the input to check if it fits your criteria. — user3587554, May 10 '14 at 04:14
if you view the dform github and go to the validation section it will show you. https://github.com/daffl/jquery.dform it has links to rules and you need jquery validation. I had to check the plugin and it provides away to validate using rules. some of those can be done via html 5's new input types too. — user3587554, May 10 '14 at 04:19
here is one solution for your email part using plain jquery. http://stackoverflow.com/questions/2855865/jquery-regex-validation-of-e-mail-address — user3587554, May 10 '14 at 04:23
ok if you get any solution of validtion .please post your answer — , May 10 '14 at 04:23
Regarding your last comment to me. You cannot write code that configures one plugin and then substitute it with a totally different plugin! Each plugin has its own methods and options. See [the documentation](http://jqueryvalidation.org) for how to properly setup and use the jQuery Validate plugin. Or just look at the thousands of examples on SO… [tag:jquery-validate] — Sparky, May 10 '14 at 04:30
I found this, but it's a validation plugin and I don't know if dform allows data attributes. https://github.com/victorjonsson/jQuery-Form-Validator — user3587554, May 10 '14 at 04:34

score 0 · Accepted Answer · answered May 10 '14 at 04:41

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

score 0 · Answer 2 · answered May 10 '14 at 05:04

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!");
}

} );

how to validate form when user goes to next element?

2 Answers2