我有以下 2 个用于日期选择器的字段。
查看中:
<div class="form-line">
<input type="text" id="iCaseFileDate" name="CaseFileDate" placeholder="Case File Date*" class="datepicker form-control" required/>
</div>
<div class="form-line">
<input type="text" id="iHearingDate" name="HearingDate" placeholder="Hearing Date*" class="datepicker form-control" required/>
</div>
当我单击“提交”按钮时,它会使用“必需”属性很好地呈现“inputForm”的所有字段,就像每当我将这些字段保留为空然后单击“提交”时,“必需”属性效果很好。但之后,如果我从日期选择器字段中选择一个日期,它不会删除案件文件日期和听证会日期字段的“此字段为必填字段”。
Javascript代码:
$(document).ready(function () {
$('#submit_button').on('click', function () {
$('#inputForm').valid()
});
});
$('#iCaseFileDate').on('change', function () {
if ($('#iCaseFileDate').val()) {
$('#iCaseFileDate').removeAttr("required");
}
});
$('#iHearingDate').on('change', function () {
if ($('#iHearingDate').val()) {
$('#iHearingDate').removeAttr("required");
}
});
提交按钮代码:
<div class="modal-footer">
<button type="submit" id="submit_button" class="btn btn-success waves-light" onclick="saveData()">SAVE</button>
<button type="button" class="btn btn-warning waves-red" data-dismiss="modal">Close</button>
</div>
function saveData() {
$("#inputForm").submit();
}
$("#inputForm").on("submit", function (event) {
event.preventDefault();
tinyMCE.triggerSave();
var $this = $(this);
var frmValues = $this.serialize();
var isValid = $("#inputForm").valid();
if (isValid == false) {
}
else {
$.ajax({
type: 'POST',
url: '/ClientInfo/Save',
data: frmValues
})
.done(function (result) {
if (result) {
alert(result.info);
clearInputFields();
$('#inputModal').modal('hide');
ReloadTable();
}
})
.fail(function (xhr) {
alert("error");
});
}
});
[添加图片是为了更好地说明]
[在填写任何输入字段并单击提交按钮之前] [ ] 1
[填写输入字段值后,案件卷宗日期和听证会日期的必填消息未删除] [ ] 2
请帮我解决这个问题。我只想在这些字段为空时显示“此字段为必填”消息,并在这些字段具有从日期选择器中选择的值时隐藏此消息。
最佳答案
您的问题不是很清楚,您是否使用模型绑定(bind)与 MVC Razor View ?
我认为你可以使用下面的jquery代码
$('#iCaseFileDate').on('change', function () {
if ($('#iCaseFileDate').val().length>0) {
$('#iCaseFileDate').removeAttr("required");
//comment
//Find the div containing validation message * the field is required* and remove it
//like below
$(this).next('.your_validation_message_div').remove();
}
});
$('#iHearingDate').on('change', function () {
if ($('#iHearingDate').val().length>0) {
$('#iHearingDate').removeAttr("required");
//comment
//Find the div containing validation message * the field is required* and remove it
//like below
$(this).next('.your_validation_message_div').remove();
}
});
关于javascript - 日期选择器字段中的表单验证无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53650630/