javascript - Bootstrap 表单中日期和时间字段的 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();
    }

    });

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

我应该将其放在绑定(bind)到上面所示表单的提交按钮的 $("#saveAppt").click(function(e) 中吗？

Answer 1

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

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

编辑:

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

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