jQuery验证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;
    }

});

}）;

一切正常，直到决定只需要一个电子邮件或电话号码。 当直接进行验证时都需要两者时，就没有问题。

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

任何帮助，不胜感激。

Answer 1

1. $().ready(function() {... 根据jQuery ready处理程序文档 “不推荐”使用$(document).ready(function() {...或$(function() {...

2. 没有理由拥有单独的.submit()处理程序。 对您的ajax使用插件的内置内置submitHandler 。 您的.submit()处理程序可能会干扰插件，并且根据插件文档 ， submitHandler回调是“验证后通过Ajax提交表单的正确位置” 。

3. 似乎引起您整个问题的问题是： messages应该是rules的同级； 您在messages对象内部错误地插入了一个} ，这会导致语法错误（ 这应该已经在JavaScript控制台中显示了 ）。

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

---

编辑：如果项目＃3只是OP中的错字，则项目＃2是可能的罪魁祸首。