我在下面有一个 javscript 验证功能:
function editvalidation() {
var isDataValid = true;
var currentCourseO = document.getElementById("currentCourseNo");
var newCourseNoO = document.getElementById("newCourseNo");
var newCourseNameO = document.getElementById("newCourseName");
var newCourseDurationO = document.getElementById("newDuration");
var currentCourseMsgO = document.getElementById("currentAlert");
var newCourseIdMsgO = document.getElementById("courseidAlert");
var newCourseNameMsgO = document.getElementById("coursenameAlert");
var newDurationMsgO = document.getElementById("durationAlert");
newCourseIdMsgO.innerHTML = "";
newCourseNameMsgO.innerHTML = "";
newDurationMsgO.innerHTML = "";
currentCourseMsgO.innerHTML = "";
if (currentCourseO.value == "") {
$('#targetdiv').hide();
currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
isDataValid = false;
} else {
if (newCourseNoO.value == "") {
$('#targetdiv').hide();
newCourseIdMsgO.innerHTML = "Please fill in the Course ID in your Edit";
isDataValid = false;
}
if (newCourseNameO.value == "") {
$('#targetdiv').hide();
newCourseNameMsgO.innerHTML = "Please fill in the Course Name in your Edit";
isDataValid = false;
}
if (newCourseDurationO.value == "") {
$('#targetdiv').hide();
newDurationMsgO.innerHTML = "Please select a Course Duration in your Edit";
isDataValid = false;
}
return isDataValid;
}
}
它说currentCourseO.value == ""
的是,说明选择的下拉选项值是否为“”,或者换句话说,请选择。但我还想检查的是,如果用户从下拉菜单中选择了另一个选项,它会清除验证错误消息。但我该怎么做呢?
下拉菜单如下:
$courseHTML = '<select name="courses" id="coursesDrop">'.PHP_EOL;
$courseHTML .= '<option value="">Please Select</option>'.PHP_EOL;
$courseInfo = array();
while ( $courseqrystmt->fetch() ) {
$courseHTML .= sprintf("<option value='%s'>%s - %s</option>", $dbCourseId,$dbCourseNo,$dbCourseName) . PHP_EOL;
$courseData = array();
$courseData["CourseId"] = $dbCourseId;
$courseData["CourseNo"] = $dbCourseNo;
$courseData["CourseName"] = $dbCourseName;
$courseData["Duration"] = $dbDuration;
array_push($courseInfo, $courseData);
}
$courseHTML .= '</select>';
更新:
下面是表格:
$editcourse = "
<form id='updateCourseForm'>
<p><strong>Current Course Details:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
</tr>
<tr>
<th>Course ID:</th>
<td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='currentAlert'></div>
<p><strong>New Course Details:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='newCourseId' name='CourseIdnew' value='' /></td>
</tr>
<tr>
<th>Course ID:</th>
<td><input type='text' id='newCourseNo' name='CourseNoNew' value='' />
<div id='courseidAlert'></div>
</td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='newCourseName' name='CourseNameNew' value='' />
<div id='coursenameAlert'></div>
</td>
</tr>
<tr>
<th>Duration (Years):</th>
<td id='data'>{$durationHTML}
<div id='durationAlert'></div></td>
</tr>
</table>
</form>
<p id='submitupdatebtn'><button id='updateSubmit'>Update Course</button></p>
";
echo $editcourse;
发生的情况是,当单击提交按钮时,我使用 javascript 来确定是否满足 editvalidation() 函数,如果没有错误则显示确认,否则它将显示来自 editvalidation() 的相关错误消息。我意识到我实际上有一个更改 jquery 功能,如果下拉菜单确实更改了选项,那么它会做一些事情。所以我猜这将是关键功能
function showConfirm() {
var courseNoInput = document.getElementById('newCourseNo').value;
var courseNameInput = document.getElementById('newCourseName').value;
var durationInput = document.getElementById('newDuration').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to update the following:" + "\n" + "Course ID: " + courseNoInput + "\n" + "Course Name: " + courseNameInput + "\n" + "Duration (Years): " + durationInput);
if (confirmMsg==true) {
submitform();
}
}
}
$('#coursesDrop').change(function() {
$('#newDuration')[0].selectedIndex = this.selectedIndex;
});
$('body').on('click', '#updateSubmit', showConfirm);