如何在用户转到下一个元素时验证表单?

时间:2014-05-10 02:58:20

标签: javascript jquery validation jquery-tools

请告诉我如何在用户转到下一个元素时验证表单?。我看了一个演示 http://jquerytools.org/documentation/validator/ 用户按下提交按钮并从字段中获取警报消息。enter image description here

当用户切换到另一个元素时,我们可以得到吗?

在我的演示中 第一个字段是“数字”。如果用户输入“字符串”并转到下一个,则会出错。 相同的秒数是。如果用户输入“字符串”并转到下一个,则会出错

这是小提琴 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"
}
);

2 个答案:

答案 0 :(得分:0)

您可以在元素的'blur()'上注册一个函数。当元素失去焦点时,将调用此函数。在此功能中,您可以对服务器进行AJAX调用并验证其中的数据。 根据服务器响应,您可以更改页面的HTML以显示相应的错误消息(如果有)。

答案 1 :(得分:0)

这样的东西可用于你的数字内容以检查它是否是一个数字,你可能需要为每个元素执行此操作。正则表达式不是我的东西,但你可以在网上搜索所需的正则表达式或使用w3c js示例来构建自己的正则表达式。 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!");
}

} );