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放入错误数据，则会在具有正确选择器的字段上抛出错误（或者两者都包含错误数据），但即使填充了两个字段，表单也不会提交。 / p>

任何帮助非常感谢。

Answer 1

$().ready(function() {...是＆＃34;不推荐＆＃34; as per jQuery ready handler documentation。使用$(document).ready(function() {...或$(function() {...
没有理由拥有单独的.submit()处理程序。使用插件的内置submitHandler作为你的ajax。您的.submit()处理程序可能会干扰插件，而as per plugin documentation，submitHandler回调是＆＃34;在验证后通过Ajax提交表单的正确位置＆＃ 34。
似乎导致整个问题的问题是：messages应该是rules的兄弟姐妹;您错误地在}对象中放置了一个迷路messages，导致语法错误（这应该已在您的JavaScript控制台中显示）。< /秒>

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

修改如果第3项只是OP中的拼写错误，则第2项可能是罪魁祸首。

jQuery验证require_from_group不允许表单提交

1 个答案: