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。

对于您的流程，我的常见流程是在输入的模糊事件上添加第一次验证，并在表单的提交事件上添加第二次（完全相同）验证，例如：

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 回答