Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用$('.errorMsg').show();或$('.errorMsg').hide();

等类名编写简单代码

并将id名称reference更改为ref

＆＃13;

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

＆＃13;

.errorMsg {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

你遇到的主要问题是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>

Answer 3

使用$（'。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 4

我建议你在表单上为submit事件添加一个监听器。这样，即使用户在输入上按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>

jQuery验证消息没有显示

4 个答案: