javascript - 使用 onclick 事件时不会出现验证消息

Question

下面是我的简单 jQuery 验证代码。但是，如果该字段留空并单击添加任务按钮，我希望出现验证。时刻都在出现。此表单用于将待办事项添加到列表中，因此加载后将为空白

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $(this).next('.errorMsg').show();
    } else {
      $(this).next('.errorMsg').hide();
    }
  });
});

$(document).ready(function() {
  $("#todo").hide(); //hide form until create new task button is clicked 
});

$(document).ready(function() {
  $("#new").on('click', function() {
   $("#todo").toggle();
	 $("#new").hide();
  });
});

$(document).ready(function() {
  $("#AddTask").click(function() {
    $("#todo").slideUp("slow", function() {
      // Animation complete.
    });
	 $("#new").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

Answer 1

$(this).next 将查找按钮之后的下一个元素，因为您的错误消息位于按钮之前。而是使用classIdentifier 并且您需要在最初隐藏消息。

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $('.errorMsg').show();
    } else {
      $('.errorMsg').hide();
    }
  });
});

.errorMsg{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

P.S. 如果您使用 prev 而不是 next 它会起作用，但我建议使用 classIdentifier 仅此特定代码不需要 prev

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $(this).prev('.errorMsg').show();
    } else {
      $(this).prev('.errorMsg').hide();
    }
  });
});

.errorMsg{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>