有条件地创建ajax url参数以与jQuery Validate一起使用

Conditionally create ajax url parameter to use with jQuery Validate

本文关键字:Validate jQuery 一起 创建 ajax url 参数 有条件      更新时间:2023-09-26

我的jquery验证脚本有问题。从本质上讲,我需要的是:基于字符串(isAdd)最后一部分的内容,当用户单击发送按钮时,脚本将在if或else语句之间进行选择,并发送ajax请求来验证输入字段。服务器将发送一个true或false标志。如果为true,则提交表单;如果为false,则不提交表单。我认为我的代码显示得更好:

// Waiting for the btnSave to be clicked
$(document).on('click', '.btnSave', function (event) {
    // Here I get the action value in the form tag, split it in chunks and 
    // get the last element in the array, assigned it to the isAdd variable
    var isAdd = $('#customerAddressForm').prop("action").split("/").pop();
    // If the variable value is the same as "Shipping", it means that it's 
    // the edit button that was clicked
    if (isAdd == "Shipping") {
        // I add the following rules to the input with id "inputAddressName"
        $('input[id="inputAddressName"]').rules("add", {
            required: true,
            noSpace: true,
            // Here I do the Ajax call, the value in the customerAddressId 
            // is appended to the url. Example: 
            // https://localhost:8443/mysite/useraccount/isExistingAddressName?addressName=Bill1&customerAddressId=1232. 
            // This get a true/false flag from the server
            remote: {
                url: "https://localhost:8443/mysite/usersite/addresses/isExistingAddressName",
                contentType: "application/json; charset=utf-8",
                data: {
                    customerAddressId: function () {
                        return $("#customerAddressForm").prop("action").split("/").pop();
                    }
                }
            }
        });
    // If the variable value is not the same as "Shipping", it means that 
    // it's the add button that was clicked
    } else {
        $('input[id="inputAddressName"]').rules("add", {
            required: true,
            noSpace: true,
            // Here I do the Ajax call for the add, a hardcoded value (-10) 
            //for the customerAddressId is appended to the url. Example: 
            // https://localhost:8443/mysite/useraccount/isExistingAddressName?addressName=Bill1&customerAddressId=-10. 
            //This get a true/false flag from the server.
            remote: {
                url: "https://localhost:8443/mysite/usersite/addresses/isExistingAddressName",
                contentType: "application/json; charset=utf-8",
                data: {
                    customerAddressId: function () {
                        return $("-10");
                    }
                }
            }
        });
    }

    $('#customerAddressForm').validate({
        ignore: 'input[type=hidden], .select2-input, .select2-focusser',
        rules: {
            "address.addressLine1": {
                required: true
            },
            "address.addressLine2": {
                number: true
            }
        },
        messages: {
            "addressName": {
                required: "Please enter an address name",
                remote: "Address name already taken. Please enter another one"
            },
                "address.addressLine1": {
                required: "Please enter your street address"
            },
                "address.addressLine2": {
                number: "Please enter only numbers"
            }
        },
        highlight: function (element) {
            $(element).closest('.control-item').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.control-item').removeClass('has-error');
        },
        errorElement: 'small',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });
});

这是根据if/else语句在远程选项中传递url的正确方式吗?它不起作用,我得到:未捕获的类型错误:无法读取未定义的属性"settings"。

您的代码。。。

$(document).on('click', '.btnSave', function (event) {
    ....
    if (isAdd == "Shipping") {
        $('input[id="inputAddressName"]').rules("add", {
            ....
        });
    } else {
        $('input[id="inputAddressName"]').rules("add", {
            ....
        });
    }
    $('#customerAddressForm').validate(....);  // <-initializes plugin
});

我只得到"无法读取未定义的属性'设置'"

你的代码中有一些致命错误。。。

  1. 在初始化表单上的插件之前,您尝试使用.rules()方法;这很可能是您的错误消息的来源。.validate()方法仅用于插件的初始化

  2. 由于.validate()方法用于初始化表单上的插件,并且只调用一次(在DOM就绪事件中),因此您永远不会将其放入click处理程序中。

改为执行此操作。。。

$(document).ready(function() {
    $('#customerAddressForm').validate(....); // <-initializes plugin
    $(document).on('click', '.btnSave', function (event) {
        ....
        if (isAdd == "Shipping") {
            $('input[id="inputAddressName"]').rules("add", {
                ....
            });
        } else {
            $('input[id="inputAddressName"]').rules("add", {
                ....
            });
        }
    });
});