![](/img/trans.png)
[英]Angular dynamic Date-picker and dynamic dropdown validation and form submit
[英]Form Validation in Date-Picker Field Not Working Properly
我有以下兩個字段用於Date-Picker。
鑒於:
<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>
當我單擊Submit按鈕時,它會很好地呈現帶有'required'屬性的'inputForm'的所有字段,就像每當我將這些字段保留為空然后單擊Submit時'required'屬性都能正常工作一樣。 但是在那之后,如果我從“日期選擇器”字段中選擇一個日期,則不會刪除“案件文件日期和聽證日期”字段的“此字段是必需的”。
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
請幫我解決這個問題。 我只想在這些字段為空時顯示“此字段為必填”消息,並在這些字段的日期選擇器中選擇了值時隱藏此消息。
從您的問題還不清楚,您是否在MVC Razor視圖中使用模型綁定?
我想你可以使用下面的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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.