Question

我有一个允许用户编辑SMTP信息的表单。所有必填字段都有class =“required”。表单有两个按钮。

保存
测试

1）保存

当用户单击“保存”按钮时，jQuery验证器会检查所有必填字段是否包含某些内容（class =“required”），然后以正常方式提交表单。这可以按预期工作。

2）测试

当用户点击测试按钮时，我使用$ .getJSON来查明输入的信息是否有效。但是，在发送ajax请求之前没有进行验证。我希望此按钮需要相同的字段。

我该如何做到这一点？

问题似乎是我设置它的方式，从来没有触发验证的提交操作。解决方案是使用jQuery验证器submitHandler选项吗？如果是这样，我如何确定单击了哪个按钮？

我的JS：

$(document).ready(function(){

    $('#testEmailProfile').click(function() {
        var map = { 
            m: 'testEmailProfile', 
            smtpHostname: $('#smtpHostname').val(),
            smtpPort: $('#smtpPort').val(),
            smtpUsername: $('#smtpUsername').val(),
            smtpPassword: $('#smtpPassword').val(),
        }
        $.getJSON('ajax.php', map, function(data) {
            if (data.success) {
                //Works
            } else {
                //Doesn't work
            }
        });
        return false;
    });

    $("#emailProfileForm").validate();

});

Answer 1

$（“＃emailProfileForm”）的位置.validate（）;这里错了。在发送ajax请求之前应该调用验证函数。

$(document).ready(function(){

    $('#testEmailProfile').click(function() {
        if($("#emailProfileForm").validate()) {
            var map = { 
                m: 'testEmailProfile', 
                smtpHostname: $('#smtpHostname').val(),
                smtpPort: $('#smtpPort').val(),
                smtpUsername: $('#smtpUsername').val(),
                smtpPassword: $('#smtpPassword').val(),
            }
            $.getJSON('ajax.php', map, function(data) {
                if (data.success) {
                    //Works
                } else {
                    //Doesn't work
                }
            });
        } else {
            return false;
        }
    });

});

如果您使用的是jquery表单验证器插件，请阅读here中的更多内容。

Answer 2

我将表单分成两个单独的表单，然后执行此操作：

$("#emailProfileForm").validate();

$("#testEmailProfileForm").validate({
    submitHandler: function() {
        var map = { 
            m: 'testEmailProfile', 
            smtpHostname: $('#smtpHostname').val(),
            smtpPort: $('#smtpPort').val(),
            smtpUsername: $('#smtpUsername').val(),
            smtpPassword: $('#smtpPassword').val(),
        }
        $.getJSON('ajax.php', map, function(data) {
            if (data.success) {
                //Success
            } else {
                //Not success
            }
        });
    }
});

可能不是最佳解决方案......

Answer 3

Jquery验证器为此

提供了提交处理程序

$(".selector").validate({

   submitHandler: function(form) {

      $(form).ajaxSubmit();
   }
 });

因此，您可以在submitHandler函数中包含所有代码。这将在验证结果成功后执行。

发送ajax请求之前的jQuery验证

3 个答案: