jQuery 验证消息不显示

Question

我正在尝试验证搜索栏。当用户将参考字段留空并单击搜索时，应该会出现一条消息，而不是没有消息，并且我的表单显示为空白。我不确定我做错了什么。

$(document).ready(function() {
  $('#search').on('click', (function() {
    if ($('#reference').val() == '') {
      // check if form is valid

      $('label[for="ref"]').find('.errorMsg').show();
    } else {
      $('label[for="ref"]').find('.errorMsg').hide();
    };
  }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>

  <button type="button" id="search">Search</button>

</form>

Answer 1

使用 $('.errorMsg').show() 和 $('.errorMsg').hide() 代替 $('label[for="ref"]').find('.errorMsg') .show() 并使用正确的 id 来获取值

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>

  <button type="button" id="search">Search</button>

</form>

Answer 2

我建议您为表单上的提交事件添加一个侦听器。这样，即使用户在输入上按 Enter，您也可以进行验证，您可以 preventDefault() 事件，停止传播和提交

$(document).ready(function() {
  var $form = $('#reference');
  $form.on('submit', function(evt) {
    var $errorMsg = $form.find('.errorMsg');
    if($form.find('#ref').val() == '') {
      $errorMsg.show();
      evt.preventDefault();
    } else {
      $errorMsg.hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12">   <span class="errorMsg" style="display:none;">Reference number required</span>

  <button type="submit" id="search">Search</button>

</form>

Answer 3

使用$('.errorMsg').show();或$('.errorMsg').hide();等类名编写简单的代码

并将 id 名称 reference 更改为 ref

$(document).ready(function() {
  $('#search').on('click', (function(event) {
    if ($('#ref').val() == '') {
      // check if form is valid
      $('.errorMsg').show();
      event.preventDefault();
    } else {
      $('.errorMsg').hide();
    };
  }));
});

.errorMsg {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>

  <button type="button" id="search">Search</button>

</form>

Answer 4

您遇到的主要问题是find() 方法，它返回所选元素的后代元素。在这种情况下不是后代，如果你想使用find()，你必须像这样使用表单id选择器#reference：

$(document).ready(function(){
    $('.errorMsg').hide();
    $("#search").on("click", function(){
        if ($('#ref').val() == '') { 
           $('#reference').find('.errorMsg').show()
         }
         else $('#reference').find('.errorMsg').hide()
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> 
  <span class="errorMsg">Reference number required</span>

  <button type="button" id="search">Search</button>

</form>

另一种方法是使用prev() 和this 按钮：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> 
  <span class="errorMsg">Reference number required</span>

  <button type="button" id="search">Search</button>

</form>