0

以下のコードには、ドロップダウンメニューのテキスト入力を含むフォームが含まれています。 

$editsession = "
    <form id='updateCourseForm'>

        <p><strong>Current Course Details:</strong></p>
        <table>
        <tr>
        <th>Course ID:</th>
        <td><input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /> </td>
        </tr>

        </table>
        <div id='currentAlert'></div>

        <p><strong>New Course Details:</strong></p>
        <table>
        <tr>
        <th>Course ID:</th>
        <td><input type='text' id='newCourseNo' name='CourseNoNew' value='' /> </td>
        </tr>
        </table>
        <div id='newAlert'></div>

        </form>

        <p id='submitupdatebtn'><button id='updateSubmit'>Update Course</button></p>

    ";

    echo $editsession;

ここで、Javascriptを使用してフォームを検証したいと思います。以下は、javascript検証のコードです。

function editvalidation() {

var isDataValid = true;

var currentCourseO = document.getElementById("currentCourseNo");
var newCourseNoO = document.getElementById("newCourseNo");

var currentCourseMsgO = document.getElementById("currentAlert");
var newCourseMsgO = document.getElementById("newAlert");


if (currentCourseO.value == ""){
currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
$('#newAlert').hide();
isDataValid = false; 
}else{
currentCourseMsgO.innerHTML = ""; 
}


if (newCourseNoO.value == ""){
newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit";
$('#newAlert').show();
isDataValid = false;
} else{
newCourseMsgO.innerHTML = ""; 
}


return isDataValid;

}

今、これは私が得ている問題です：

私がjavascript検証で述べようとしているのは、#currentCourseNoが空の場合（テキスト入力が空白の場合）、divタグに属するこのエラーメッセージを表示しますが#currentAlert、divタグに表示されるメッセージを非表示にすること#newAlertです。#currentCourseNoが空でない場合は 、#newAlertエラーメッセージがあれば表示します。

私が抱えている問題は、テキスト入力が実際には非表示になっているはずなのに#newAlert、テキスト入力が空の場合でもエラーメッセージが表示されることです。#currentCourseNo私が達成したいことを達成するために、上記のJavaScriptで何を変更する必要がありますか？

4

1 に答える 1

1

まず、jQuery について学びます。

あなたのプロセスでは、私の一般的なフローは、入力のぼかしイベントに検証の最初のパスを追加し、フォームの送信イベントに検証の 2 番目の (まったく同じ) パスを追加することです。

var error = $('.errormsg');

var checks =
{
  "fieldName1": function(val) { return /*true or an error string*/ },
  "fieldName2": function(val) { return /*true or an error string*/ }
};

$('input')
.focus(function()
{
  $(this).removeClass('error');
})
.blur(function()
{
  error.slideUp(200);

  var check = checks[this.name];
  if (!check) { return; }

  var validation = check(this.value);

  if (typeof validation === "string")
  {
    $(this).addClass('error');
    error.text(validation).slideDown(200);
  }
});

$('form').submit(function(e)
{
  //e.preventDefault();

  if ($('input.error').length != -1)
  {
    error.text('All fields are required').slideDown(200);
    return;
  }

  for(var check in checks)
  {
    var field = $('input[name="' + check + '"]');
    if (field.length == -1) { continue; }

    var validation = check(field.val());

    if (typeof validation === "string")
    {
      field.addClass('error');
      error.text(validation).slideDown(200);
      return;
    }
  }
});
于 2012-11-30T04:17:28.033 に答える