JQuery Bootstrap datepicker 验证错误未显示

Question

我这几天一直在努力解决这个错误（断断续续），现在需要另一双眼睛来告诉我哪里出错了。我觉得这很简单，但看不到。

我遇到的问题是验证消息没有显示在日期选择器字段中。

下面的代码有效，因为验证显示在datepicker 字段下方的字段中。问题是这个字段应该被隐藏，如果我隐藏它，错误消息不会显示。

如果我将 jQuery 验证更改为在 datepicker 字段上工作，则不会显示错误消息。

我认为在此页面上找到的代码会有所帮助，因此我已包含该文件并按照页面建议添加了 dpDate: true，但仍然没有乐趣。：

http://keith-wood.name/uidatepickervalidation.html

我希望这是有道理的，有人可以帮助我。

这是我的 HTML / jQuery

这适用于startDate3，但如果重命名为日期选择器字段startDate2，则无效：

$("#editEventForm").validate ({
rules: {
	artwork: { filesize: 2097152  },
	name:  {
		required: true,
		minlength: 2,
		maxlength: 50
	},
	desc: {
		required: true,
		minlength: 2,
		maxlength: 3000
	},
	venue2: {
		required: true
	},
	startDate3: {
		required: true, 
		dpDate: true 
	},
	endDate3: {
		required: true
	},
	showFrom3: {
		required: true,
		greaterThan: "#startDate3"
	},
	cutOffDate3: {
		required: true
	},
	totalSubCat: {
		minStrict: 0,
		maxStrict: 4
	}
},
messages: {
	name: "Please enter your name longer than 2 and less than 50 characters",
	desc: "Please enter a description longer than 2 and less than 3000 characters",
	venue2: "Please choose a venue",
	startDate3: "Please enter a start date/time",
	endDate3: "Please enter an end date/time",
	showFrom3: "Please enter a show from date",
	cutOffDate3: "Please enter a cut off date",
	totalSubCat: "Please choose between 1 and 3 categories"
}
})

<div class="form-group">
<i class="fa fa-question" id="startDate"></i>
<label for="startDate2">Start</label>
<div class="input-group date form_datetime" data-date="<?= date( 'Y-m-d' ) ?>T19:00:00Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="startDate3">
	<input class="form-control" name="startDate2" id="startDate2" required size="16" type="text" readonly>
	<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
	<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="" id="startDate3" name="startDate3" /><br/>
</div>

Answer 1

你错过了一些库，不仅仅是 jquery：

$(function () {
  $("#editEventForm").validate (
    {
      rules: {
        artwork: { filesize: 2097152  },
        name:  {
          required: true,
          minlength: 2,
          maxlength: 50
        },
        desc: {
          required: true,
          minlength: 2,
          maxlength: 3000
        },
        venue2: {
          required: true
        },
        validDefaultDatepicker: {
          required: true,
          dpDate: true
        },
        startDate3: {
          required: true,
          dpDate: true
        },
        endDate3: {
          required: true
        },
        showFrom3: {
          required: true,
          greaterThan: "#startDate3"
        },
        cutOffDate3: {
          required: true
        },
        totalSubCat: {
          minStrict: 0,
          maxStrict: 4
        }
      },
      messages: {
        name: "Please enter your name longer than 2 and less than 50 characters",
        desc: "Please enter a description longer than 2 and less than 3000 characters",
        venue2: "Please choose a venue",
        startDate3: "Please enter a start date/time",
        endDate3: "Please enter an end date/time",
        showFrom3: "Please enter a show from date",
        cutOffDate3: "Please enter a cut off date",
        totalSubCat: "Please choose between 1 and 3 categories"
      }
    }
  );
  $('#startDate2').datepicker();
  $('#startDate3').datepicker();
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>


<form id="editEventForm">
    <div class="form-group">
        <i class="fa fa-question" id="startDate"></i>
        <label for="startDate2">Start</label>
        <div class="input-group date form_datetime" data-date="<?= date( 'Y-m-d' ) ?>T19:00:00Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="startDate3">
            <input class="form-control" name="startDate2" id="startDate2" required size="16" type="text" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="" id="startDate3" name="startDate3" /><br/>
    </div>
    <input type="submit" value="ClickMe">
</form>

Answer 2

为什么不向您的输入元素添加以下属性，以便您添加自己的验证消息。您可以在“ ”之间放置您喜欢的任何消息。

data-rule-required="true" data_val_date = "Please enter a valid date"