jQuery Validation plugin - 使用 Bootstrap 3 验证单选和复选框输入的混合

Question

在$(document).ready 上，提交按钮被禁用。仅当整个表单有效时才应启用该按钮，即 1) 选择了一个单选（水果），以及 2) 选择了一个或多个复选框（场合）。我在这里查看了很多答案，并尝试使用在文档更改上测试 if (form.valid()) 的函数，但是当只选择水果时，评估结果为 true。我相信submitHandler 是我想要在整个表格中得到的，但它并没有被解雇。将收音机更改为复选框并没有什么不同。

jsFiddle

html

<form id="categorizer-form" method="POST" action="\submit">
    <div class="container">
        <br><p>1. What <strong>kind</strong> of fruit is this?</p>
        <div class="btn-group col-xs-12" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="kind" id="apple" value="apple">apple
            </label>
            <label class="btn btn-default">
                <input type="radio" name="kind" id="orange" value="orange">orange
            </label>
        </div>
    </div>

    <div class="container">
        <br><p>2. On what <strong>meal occasions</strong> would you eat it? (Please choose as many as apply.)</p>
        <div class="btn-group col-xs-12" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="breakfast" value="breakfast" >breakfast
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="lunch" value="lunch" >lunch
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="dinner" value="dinner" >dinner
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="snack" value="snack" >snack
            </label>
        </div>
    </div>
    <!-- ######################### -->
<br>
<br>
    <div class="well well2">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-center">
                    <button class='btn btn-lg btn-danger btn-next' type='submit' id='Next'>Click to submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

js

$(document).ready(function() {

    $('.btn-next').attr('disabled', true)

    $( 'form#categorizer-form' ).validate({
        debug: true,
        rules: {
            kind: {
                required: true,
            },
            occasion: {
                required: true,
            }
        },

        submitHandler: function(form) {
            alert('submitHandler fired')
            $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success');        // enables button
        }

    });

});

Answer 1

你的代码...

submitHandler: function (form) {
    alert('submitted')
    $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success'); // enables button
}

submitHandler 只会在满足这两个条件时触发...

1. 用户点击提交按钮。

2. 表格有效。

您的submitHandler 未触发，因为您的提交按钮已禁用且无法单击。您无法在submitHandler 中启用提交按钮，因为您无法在不单击按钮的情况下触发它。

相反，您必须使用change 事件处理程序在submitHandler 之外启用提交按钮，该处理程序在.validate() 方法外部，每次表单更改时都会触发。然后可以使用.valid()方法测试表单，判断是否可以启用按钮。

$('#categorizer-form').on('change', function () {
    if ($(this).valid()) {
        // enable button
        $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success'); 
    } else {
        // disable button        
        $('.btn-next').prop('disabled', true).addClass('btn-danger').removeClass('btn-success'); 
    }
});

演示：http://jsfiddle.net/h1r2fmj0/

---

引用 OP：

"... 尝试使用测试 if (form.valid()) 更改文档的函数，但当仅选择水果时评估结果为 true。"

那是不可能的，除非你以某种方式将.valid() 附加到果园。否则，当正确附加到 <form> 元素时，.valid() 只能在 整个表单 有效时返回 true。

换句话说，form.valid() 是没有意义的，除非你已经定义了var form = $('#categorizer-form')。

它必须附加到以<form> 元素为目标的变量或选择器。根据您使用它的方式/位置，form 关键字可能不起作用。 （form 关键字仅用于某些回调函数内部，例如 submitHandler。但是，您通常不在.validate() 方法。）

请注意上面的演示代码中$(this).valid() 与$('#categorizer-form').valid() 相同，因为$(this) 代表$('#categorizer-form')。

---

您需要向我们展示导致您描述的问题的代码。