如何在 JQuery 验证插件 addmethod() 中向服务器端发送异步 AJAX 调用

Posted 2023-05-09

【中文标题】如何在 JQuery 验证插件 addmethod() 中向服务器端发送异步 AJAX 调用

【英文标题】：How to send Asynchronous AJAX call to serverside in JQuery validation plugin addmethod()

【发布时间】：2015-10-02 13:38:01

【问题描述】：

我目前正在使用 JQuery 验证插件来交付自己的框架，我需要在客户端和服务器端验证 CRUD 表单。重要的是表单不是静态的，因此由“handlebar.xml”动态创建。 js”。

所以我在使用类创建输入字段时映射了客户端验证。

例如-

<form id="form-asset-create">
  <input type="text" class="my own custom validation for client side" />
</form>

我有客户端验证的自定义方法来调用服务器端并检查创建的资产是否已经添加。但是当用户输入数据时我需要异步发送这个 AJAX 调用。 在下面

我有一个名为 clientsideValidation.js 的 javascript 文件，用于在客户端进行这些验证。

$.validator.addMethod("isUniqueField", function(value, element) 
  var elementname = element.getAttribute('name');
  var data = '%22name%22 : %22' + value + '%22';
  var result = false;
  $.ajax(
    type: "GET",
    url: caramel.url("/apis/assets?type=gadget&q=" + data),
    dataType: "json",
    async: true,
    success: function(data) 
      result = data.list.length <= 0;
      $.validator.messages.isUniqueField = "The " + elementname + " already taken";
    ,
    error: function(xhr, thrownError) 
      console.log("error " + xhr.responseText + "  " + thrownError);
    
  );
  return result;
, $.validator.messages.isUniqueField);

我已经尝试过这种方式，但是当我拥有 async : true 之类的属性时，我无法获得正确的错误消息，并且当我将其更改为 false 时，它​​工作正常。 任何人都可以建议我一个完成这项任务的好方法。有没有办法在自定义验证方法中异步发送 ajax 请求。

当表单准备好和点击提交按钮创建资产时，我必须调用客户端验证。

$('#form-asset-create').validate();

建议将不胜感激并提前致谢

【问题讨论】：

插件中内置了一个名为remote 的方法，它已经可以做到这一点。

【参考方案1】：

您必须使用 if 条件在提交时验证表单。

举例

$('#form-asset-create').on('submit', function()
  if($('#form-asset-create').valid())
      /* START YOUR AJAX CALL OR FURTHER PROCESS HERE*/
  
);

您必须为所需的验证添加类并将其消息添加到动态创建的文本框。

例如

<input type="text" name="email" id="email" class="form-control required email isUniqueField" data-msg-required="This field is required." data-msg-email="Please enter valid Email."   data-msg-isUniqueField="Please enter Unique value." placeholder="Email  *" value="">

【讨论】：

我只需要验证表单中的一些字段，而且我无法预测将动态生成的字段。那么如何在您建议的上述方法中定义 ajax 调用。感谢您的快速回复.

我看不出这个答案如何解决 OP 关于在验证过程中使用异步 Ajax 调用的问题。

在动态创建的文本框中他只需要添加类 "isUniqueField" 之后他使用 data-msg-isUniqueField 定义自定义消息，如果他想要。那么当$('#form-asset-create').valid() 调用它时，它将验证为表单输入元素提供的所有验证

我们不能像这样添加验证消息，因为我使用 jqueryvalidation 插件 addMethod 我只能在动态创建字段时向类添加验证。我遵循了这个jqueryvalidation.org/jQuery.validator.addMethod