Question

我在下面有一个代码，其中包含一个包含文本输入的表单下拉菜单：

$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中进行哪些更改才能实现我想要实现的目标？

Answer 1

首先，了解jQuery。

对于您的过程，我的常见流程是在输入的blur事件上添加第一次验证，在表单的submit事件上添加第二次（完全相同）验证，如：

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;
    }
  }
});

如何隐藏/显示javascript中的消息？

1 个答案: