0

私は以下の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);
4

1 に答える 1

1 
$("#currentCourseNo").change(function(){
    if($("#currencCourseNo").val()!="")
    {
        $("#currentAlert").html("");
    } else {
        $("#currentAlert").html("error message here");
    }
});

とにかくjQueryを使用していonchangeます。フォーム要素のイベントでそれを行い、エラーを動的に表示/非表示にします。この場合、submit 関数を待つ必要はまったくありません。

于 2012-12-09T13:44:36.780 に答える