引导表单中的日期和时间字段的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) ，它绑定到上面显示的表单的$("#saveAppt").click(function(e)按钮吗？

Answer 1

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

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

编辑：

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

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