javascript - HTML & JS 错误未显示（复选框错误显示在复选框中）

Question

我正在为练习提供送餐服务，我要求用户至少选择一种食物。错误消息显示在复选框中：

我想要这里的错误信息：

**错误工作正常，但它只是在错误的地方。

这是 HTML

            <h2 class="mg-b-15">Type of drinks:</h2><br>
            <input id="checkboxFT" type="checkbox" value="Pepsi" name="type" class="mg-b-15"><span
                class="tx-20">Pepsi</span><br>
            <input id="checkboxPT" type="checkbox" value="Sprite" name="type" class="mg-b-15"><span
                class="tx-20">Sprite</span><br>
            <input id="checkboxI" type="checkbox" value="Apple Juice" name="type" class="mg-b-15"><span
                class="tx-20">Apple Juice</span><br>
            <input id="checkboxII" type="checkbox" value="Orange Juice" name="type" class="mg-b-15"><span
                class="tx-20">Orange Juice</span><br>
            <input id="checkboxIII" type="checkbox" value="Fruit Punch" name="type" class="mg-b-15"><span
                class="tx-20">Fruit Punch</span><br>

这是JS

        type:       {
            required: true,
            minlength: 1
        },
    },

错误信息

        type: { // makes user choose drink
            required: 'Please choose a drink'
        },

验证

 $("#personalAndFoodFormId").validate({ // Make sure the user enters the required data
    ignore: "",
    rules: {
        type:       {
            required: true,
            minlength: 1
        },
    },

标签： javascripthtmlweb