发送ajax请求之前的jQuery验证

时间:2011-03-16 08:47:42

标签: jquery jquery-validate

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

  1. 保存
  2. 测试
  3. 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();
    
    });
    

3 个答案:

答案 0 :(得分:0)

$(“#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中的更多内容。

答案 1 :(得分:0)

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

$("#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
            }
        });
    }
});

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

答案 2 :(得分:0)

Jquery验证器为此

提供了提交处理程序
$(".selector").validate({

   submitHandler: function(form) {

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

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