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

Question

我目前正在使用 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();

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

Answer 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="">