未显示 JQuery 引导程序日期选取器验证错误

JQuery Bootstrap datepicker validation error not showing

本文关键字：验证 错误 选取 日期 显示 JQuery 引导程序      更新时间：2023-09-26

我已经对这个错误进行了几天（开和关）的打击，现在需要另一双眼睛来告诉我哪里出了问题。我认为这是一件简单的事情，但看不到它。

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

下面的代码有效，因为验证显示在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>

你错过了一些库，不仅仅是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>

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

data-rule-required="true" data_val_date = "Please enter a valid date"
相关文章：