Bootstrap Modal未得到验证并显示错误消息

Question

我已经通过多个链接来验证模态，并尝试使用以下代码片段。我不确定模态未验证且错误消息未显示是什么问题。

这是我的HTML

<button class="btn btn-primary" data-toggle="modal" data-target='#sendModal' type="button">Contact <span class="icon glyphicon "></span></button>   

        <div class="modal fade" id="sendModal" role="dialog">
    <div class="modal-dialog" >
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h5 class="modal-title">Contact</h5>
        </div>
        <div class="modal-body">

            <div class="form-group">
                <label for="subject">Subject :</label>
                <input class="form-control" id="subject" name="subject" type="text" >
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" id="check1"type="checkbox" name="sp[]" value="1" >
                    <label class="form-check-label" for="check1">
                        Check1
                    </label>

                </div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input " id="check2" type="checkbox" name="sp[]"value="2" >
                    <label class="form-check-label" for="check2">
                        Check2
                    </label>

                </div>
            </div>
        </div>
            <div class="modal-footer">
                <button type="button" id="btnSend" class="btn btn-primary">Send </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

</div>

要验证的Javascript函数

 $(document).ready(function () {
$("#sendModal").validate({
            rules: {
                'sp[]': {
                    required: true,
                    minlength: 1
                },
                subject: "required"
            },
            messages: {
                'sp[]': "Please select atleast one type of check",
                    subject: "Please enter subject"
            }
        });

         $("#btnSend").click(function () {
         var isValid = $("#sendModal").validate();
         });
});

当我单击发送按钮时，即使我没有输入subject文本框或未选中任何复选框，该表单仍在提交而未显示错误消息。

[请让我知道当用户未选中任何复选框且未输入主题时，如何显示错误消息，并且消息应在文本框和复选框下方以红色字体显示。

Answer 1

您总是可以只在输入标签中添加required属性。