用戶轉到下一個元素時如何驗證表格？

Question

您能告訴我當用戶轉到下一個元素時如何驗證表單嗎？。我看到了一個演示http://jquerytools.org/documentation/validator/，在該演示中，用戶按下了提交按鈕，並從字段中獲取了警告消息。

當用戶切換到另一個元素時，我們可以獲得什么？

在我的演示中，第一個字段是“ number”。如果用戶輸入“ string”並轉到下一個，則會出現錯誤。 秒鍾是數字。如果用戶輸入“字符串”並轉到下一個，則會出現錯誤

這是小提琴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

您可以在元素的'blur()'上注冊一個函數。 當元素失去焦點時將調用此函數。 在此功能中，您可以對服務器進行AJAX調用並在那里驗證數據。 根據服務器的響應，您可以更改頁面的HTML以顯示適當的錯誤消息 （如果有）。

Answer 2

像這樣的事情會在您的數字資料上起作用，以檢查它是否為數字，您可能需要對每個元素執行此操作。 正則表達式不是我的事，但是您可以在網絡上搜索所需的正則表達式或使用w3c js示例構建自己的正則表達式。 w3c js正則表達式

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

} );