Question

当我点击提交按钮时，它仍然提交表单而不验证字段。我也在这里查看了其他解决方案，但毫无疑问提到在提交时点击功能中该怎么做。

这是我的代码：https://jsfiddle.net/ishtiaq156/an1xqoxz/

表格：

      $('#submitContact').click(function() {
        var customerId = $('#customerId').val();
        var formData = $('#addCustomerForm').serialize();

        $.ajax({
          url: "/abc/admin/customer/" + customerId + "/addContact",
          type: "POST",
          dataType: "json",

          data: formData,
          success: function(data) {
            location.reload();
          },
          failure: function(errMsg) {
            alert(errMsg);
          }

        });
      });

JavaScript的：

 $('#submitContact').click(function() {
                var customerId = $('#customerId').val();
                var formData = $('#addCustomerForm').serialize();

                $.ajax({
                  url: "/abc/admin/customer/" + customerId + "/addContact",
                  type: "POST",
                  dataType: "json",

                  data: formData,
                  success: function(data) {
                    location.reload();
                  },
                  failure: function(errMsg) {
                    alert(errMsg);
                  }

                });
              });

Answer 1

你应该在这里发布控制台日志

确保您已包含jquery验证插件

or download it

Answer 2

我过去做过的一种方法是在调用你的ajax函数的验证代码中添加一个提交处理程序。然后您可以将按钮更改为type =“submit”

$('#addCustomerForm').validate({
    rules: {
        /* removed for brevity */
    },
    messages: {
        /* removed for brevity */
    },
    submitHandler: function (form) {
        updateRecord();
        /* $("#dialog-form").dialog("close"); -  if using dialog */
    }
    /* ....add other options as needed */
});

function updateRecord() {
    var customerId = $('#customerId').val();
    var formData = $('#addCustomerForm').serialize();

    $.ajax({
        url: "/abc/admin/customer/" + customerId + "/addContact",
        type: "POST",
        dataType: "json",

        data: formData,
        success: function(data) {
           location.reload();
        },
        failure: function(errMsg) {
           alert(errMsg);
        }
    });
}

此外，您可以使用数据发送所有表单变量，而不是在URL中添加一些：

data: {
    customerId: customerId,
    addContact: "addContact",
    ...add other form fields 
}

使用jquery.validate（）进行jQuery对话框验证

2 个答案: