如果验证失败，如何通过 jQuery AJAX/JSON 调用检索数据并显示错误

Question

如果验证或调用因任何原因而失败，我如何通过 AJAX/JSON 调用检索数据并在页面上显示错误消息？

我正在使用 ASP.NET MVC 5 和 jQuery。

我有一个包含多个文本框的添加表单，此页面添加的内容无关紧要。其中一个文本框用于填写员工编号，例如 123456。在此文本框旁边，我有一个标记为“填充员工详细信息”的按钮。此按钮的作用是，如果单击它，它会执行服务调用以从外部数据源检索该员工的所有详细信息。然后，它使用从服务调用返回的数据填充某些文本框。此按钮不是提交按钮，用于提交要保存在数据库中的表单数据。它只是表单上的一个附加按钮，用于进行外部查找。这是它的样子：

以上部分的部分HTML代码如下：

<tr>
     <td class="edit-label">Employee Number: <span class="required">**</span></td>
     <td>
          @Html.TextBoxFor(x => x.EmployeeNumber, new { maxlength = "6" })
          @Html.ValidationMessageFor(x => x.EmployeeNumber)
          <button id="PopulateEmployeeDetailsButton" type="button">Populate Employee Details</button>
     </td>
</tr>

以上部分的jQuery代码如下：

$(document).ready(function () {
     $('#PopulateEmployeeDetailsButton').click(function () {
          var url = '/Application/GetEmployeeDetails';
          var data = { employeeNumber: $('#EmployeeNumber').val() };

          $.getJSON(url, data, function (data) {
               $('#Title').val(data.Title);
               $('#FirstName').val(data.FirstName);
               $('#LastName').val(data.LastName);
          });
     });
});

返回 JSON 结果集的 GetEmployeeDetails 操作方法：

public ActionResult GetEmployeeDetails(string employeeNumber)
{
     Employee employee = employeeService.GetEmployeeDetails(employeeNumber);

     return Json(employee, JsonRequestBehavior.AllowGet);
}

我的这个表单的视图模型看起来像这样：

public class ApplicationViewModel : ViewModelBase
{
     [Required(ErrorMessage = "Employee number is required")]
     [StringLength(6, MinimumLength = 6, ErrorMessage = "Employee number must consist of 6 numbers")]
     [RegularExpression(@"^\d+$", ErrorMessage = "Employee number must be numeric")]
     public string EmployeeNumber { get; set; }

     [Required(ErrorMessage = "First name is required")]
     public string FirstName { get; set; }

     [Required(ErrorMessage = "Last name is required")]
     public string LastName { get; set; }

     // I have left out the rest
}

如果我单击表单的提交按钮，上述操作正常，然后所有这些错误消息都会根据错误类型显示。

我需要实现的是以下内容。当用户单击“填充员工详细信息”按钮时，我还需要执行验证，最好是在我进行服务调用之前。如果某些东西没有正确验证，我需要验证来触发并显示错误消息，就像我单击表单的提交按钮时一样。如果服务调用失败（可能是因为它不工作），那么我需要它以与 ASP.NET MVC 应用程序中发生错误时相同的方式转到我的通用错误页面。

我该怎么做？

Answer 1

如果我理解正确，您想在触发 ajax 调用之前手动验证表单。

验证插件有一个valid() 方法，可以在表单上调用该方法来触发验证以及与之相关的所有内容（错误消息、输入变为红色等）。文档在这里：http://jqueryvalidation.org/valid/

文档指定必须已经在表单上调用了 .validate([options]) 方法，但是如果您可能正在使用 MVC 非侵入式验证，那么这已经为您完成了。

简而言之，你可以这样做：

 $('#PopulateEmployeeDetailsButton').click(function (ev) {
      if ($('form').valid()) {
          // web service call ...
      } else {
          ev.preventDefault();
          return false;
      }
 });

如果服务调用失败，则重定向到错误，您必须在回调中执行此操作：有关详细信息，请参阅此SO question。

使用.getJSON()，您可以选择像这样链接回调（从文档中简化）：

$.getJSON(url, data, function (data) {
    $('#Title').val(data.Title);
    $('#FirstName').val(data.FirstName);
    $('#LastName').val(data.LastName);
})
.fail(function() { 
    // redirect to error here...
});