Question

我已经对这个错误进行了几天的打击（现在和开），现在需要另外一双眼睛来告诉我哪里出错了。我认为它很简单但却无法看到它。

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

以下代码，因为验证显示在datepicker字段下方的字段上。麻烦的是这个字段应该被隐藏，如果我隐藏它，错误信息就不会显示。

如果我将jQuery验证更改为datepicker字段，则错误消息将无法显示。

我认为此页面上的代码会有所帮助，因此我已将该文件包含在内，并添加dpDate: true，因为页面显示但仍然没有任何乐趣。

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

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

这是我的HTML / jQuery

这适用于startDate3，但如果重命名为datepicker字段startDate2则不行：

＆＃13;

$("#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"
}
})

＆＃13;

<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>

＆＃13;

Answer 1

你错过了一些图书馆，不仅仅是jquery：

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

Answer 2

为什么不在输入元素中添加以下属性，以便添加自己的验证消息。您可以在＆＃34;之间放置您喜欢的任何信息。＆＃34;

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

JQuery Bootstrap datepicker验证错误未显示

2 个答案: