引导表单中日期和时间字段的 jQuery 验证

Question

我有一个带有一些 jQuery 验证的 bootsrap 表单，目前它不能正常工作，而且我没有足够的知识让它工作。 我的目标是当单击提交按钮时，如果未根据我的验证标准设置字段，则验证应该显示一条消息。 问题是我有一个日期和时间字段，我不知道如何使验证为他们工作。它们有一些默认值，基本上现在我可以保存默认值而不是一些有效的日期和时间。

目前，我只能在表单中未根据验证标准设置reason 字段时看到消息。

这是表格：

<form class="form-horizontal form" id="validate-form">
    <div class="form-group">
        <label class="control-label col-sm-2" for="date">Date:</label>
        <div class="col-sm-2 " class="dpckr" >
        <!-- <input class="form-control " id="date " name="date " placeholder="MM/DD/YYY " type="text "/> -->
          <input id="date" type="text " class="form-control datepicker" name="date" value="Click to select date" required>
        </div>
      </div>
      <div class="form-group ">
        <label class="control-label col-sm-2 " for="text ">Hour:</label>
        <div class="col-sm-2 ">
          <select class="form-control sct" id="time" name="time">
            <option value="" class=" ">Time</option>
            <option value="10am " class=" ">10:00-10:30</option>
            <option value="1030am " class=" ">10:30-11:00</option>
           </select>
        </div>
      </div>
      <div class="form-group ">
        <label class="control-label col-lg-2 " for="reason ">Reason:</label>
        <div class="col-lg-3 ">
          <textarea class="form-control " id="reason" name="reason" placeholder="Describe the reason" rows="5 "></textarea><br>
        </div>
      </div>
      <div class="form-group ">
        <div class="col-sm-offset-2 col-sm-10 ">
          <button id="saveAppt" type="button" class="btn btn-default ">Submit</button>
        </div>
      </div>
    </form>

以及表单验证：

 $("#validate-form").validate({
    //specify the validation rules
    rules: {
    date: "required",
    time: "required",
    reason: {
        required: true,
        minlength: 40
    }
    },

    messages: {
    date: "Date must be selected!",
    sct: {
    required: "Time option must be selected!",
    },
    reason: {
    required: "Reason filed cannot be blank!",
    minlength: "Reason must be descibed in at least 40 characters."
    }
    },

    submitHandler: function(form){
    form.submit();
    }

    });

我也不清楚单击submit 按钮时如何触发此验证？

我应该把它放在$("#saveAppt").click(function(e)中，它绑定到上面显示的表单的提交按钮吗？

Answer 1

我相信只要您实际提交表单，验证插件应该会自动捕获提交事件，尝试将按钮的类型从“按钮”更改为“提交”，或者将其全部删除（大多数如果没有提供类型，浏览器将退回到提交）。

      <button id="saveAppt" type="submit" class="btn btn-default ">Submit</button>

编辑：

我已经为您设置了一个 jsfiddle，您可以在其中看到代码正在运行，尽管它需要一些样式。检查您的控制台以确保没有错误阻止您的验证插件运行。

https://jsfiddle.net/vc4vvrL0/7/