为什么不工作服附加多个 jQuery

Question

我有一个客户端代码表单，如果必须在提交表单之前填写所有表单，我想显示一条消息。

如果只有一个附加它可以工作，但是在我添加另一个后不起作用。

有解决办法吗？

这段代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<form id='id_form' action='signup.php' method='post'>
  <label for='name'>Your Name:</label>
  <input type='text' id='name' name='name' value=''/>
  <span class='name'></span>
  <br />

  <label for='username'>Username:</label>
  <input type='text' id='username' name='username' value=''/>
  <span class='username'></span>
  <br />

  <input id="test" type="submit" value="Submit" />
</form>

<script>
  $('#test').click(function(){

    if ($('#name').val()=='') {
      $('.name').append(' Name is required')
      return false
    }
    else {
      return true
    }

    if ($('#username').val()=='') {
      $('.username').append(' Username is required')
      return false
    }
    else {
      return true
    }
  })

  $('#name').click(function(){
    $('.name').html('')
  })

  $('#username').click(function(){
    $('.username').html('')
  })
</script>

Answer 1

那是因为你在使用：

return false;

在中间，它突然停止执行。所以你需要做的是，收集所有的错误，最后，如果有错误，return false。

有这样的错误标志：

$('#test').click(function() {
  var error = false;

  if ($('#name').val() == '') {
    $('.name').append(' Name is required');
    error = true;
  }

  if ($('#username').val() == '') {
    $('.username').append(' Username is required');
    error = true;
  }

  return !error;
});

请不要忘记每个语句末尾的;。