jQuery Validate require_from_group 不允许表单提交

Question

我有两个 Boostrap 表单元素正在尝试验证，至少需要 1 个：

 <div class="form-group">
    <label>Notification Email:</label>
    <input type="email" class="form-control notifGroup" id="notifEmail" name="notifEmail" />
 </div>
 <div class="form-group">
   <label for="phone">Notification Phone Number for SMS:</label>
   <input type="text" class="input-medium bfh-phone notifGroup" data-country="US" id="notifPhone" name="notifPhone" />
 </div>

我有我的脚本：

         <script src="/public/js/jquery-1.12.4.min.js"></script>
         <script src="/public/js/jquery.validate.min.js"></script>
         <script src="/public/js/additional-methods.min.js"></script> 

jQuery 验证版本 1.15.0

还有我的验证功能：

$(document).ready(function() {


$('#form').validate({

     rules: {
        notifPhone: {
            require_from_group: [1, ".notifGroup"]
        },
        notifEmail: {
            require_from_group: [1, ".notifGroup"]
        }  
    },
    messages: {


    },
     submitHandler: function(form) {


        var email = $('#notifEmail').val()
        var phone = $('#notifPhone').val()

        data = {

            phone,
            email
        }

        $.ajax({
            type: 'POST',
            url: 'http://myurl/myendpoint',
            data: data,
            success: function(res) {
                if (res == true) {                  
                    $('#error').html('<p><strong>all good.</strong></p>')
                    $('#form')[0].reset()
                    $('#submitBtn').hide()
                    setTimeout(function() {
                        $('#error').html('<p></p>')
                    }, 5000)
                }else if (res == 'over limit'){
                    $('#error').html('<p><strong>too many.</strong></p>');
                    setTimeout(function() {
                        $('#error').html('<p></p>')
                    }, 5000)                  
                }else {             
                    $('#error').html('<p><strong>already there.</strong></p>');
                    $('#form')[0].reset();
                    $('#submitBtn').hide()
                    setTimeout(function() {
                        $('#error').html('<p></p>')
                    }, 5000)


                }

            },
            error: function(err) {
                console.log(err);
            },
            timeOut: 5000

        });

        return false;
    }

});

});

在决定只需要 1 个电子邮件或电话号码之前，一切正常。在直接验证下两者都需要时，没有问题。

但是现在，当尝试只需要一个时，不会引发任何错误，并且表单只会提交空白值。如果我为一个或两个选择器而不是 .notifGroup 输入错误数据，则错误会在具有正确选择器的字段上引发（或两者都带有错误数据），但即使两个字段都已填写，表单也不会提交。

非常感谢任何帮助。

Answer 1

1. $().ready(function() {... 是“不推荐”as per jQuery ready handler documentation。使用$(document).ready(function() {... 或$(function() {...

2. 没有理由拥有单独的.submit() 处理程序。为您的 ajax 使用插件的内置 submitHandler。您的.submit() 处理程序可能会干扰插件，而as per plugin documentation，submitHandler 回调是“验证后通过 Ajax 提交表单的正确位置”。

3. 似乎导致您的整个问题的问题是：messages 应该是rules 的兄弟；您错误地在 messages 对象中放置了一个杂散的 }，这会导致语法错误（这应该已显示在您的 JavaScript 控制台中）。

工作演示：http://jsfiddle.net/pezez5um/

---

编辑： 如果第 3 项只是 OP 中的一个错字，那么第 2 项可能是罪魁祸首。