Question

我有验证工作，所以当用户没有输入参考编号并点击搜索时，会出现验证消息，但表单也是如此。表单为空，因为没有任何内容放入输入字段。

我希望在用户点击搜索时显示验证消息，但不显示表单。换句话说，用户在键入有效的参考号之前不能做任何事情。这是我的代码。

$(document).ready(function() {
  $('#search').on('click', (function(event) {
    if ($('#ref').val() == '') {
      $(this).prev('.errorMsg').show();
    } else {
      $('#summary').hide();
      $(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>

<form id="summary" method="get" action="">
  <h2>Summary Form</h2>
  //form content is here
</form>

Answer 1

也许这个：

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

Answer 2

我会更进一步，并禁用提交按钮。

以下内容将运行您对keyup的检查（因此无论何时输入新字符）以及更改（当字段值失去焦点时更改字段值时会检测到这一点。）

您还会注意到事件监听器现在绑定到输入而不是提交按钮，因为我们正在禁用它。

＆＃13;

$(document).ready(function() {
  $('#ref').on('keyup change',function(event) {
    if ($(this).val() == "") {
      $(this).next('.errorMsg').show();
      $("#search").attr('disabled','disabled');
    } else {
      $('#summary').hide();
      $(this).next('.errorMsg').hide();
      $("#search").removeAttr('disabled');
    };
  });
  $(this).next('.errorMsg').show(); // show initially. Not necessary but OP was having a conflicting style.
});

＆＃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" disabled>Search</button>
</form>

<form id="summary" method="get" action="">
  <h2>Summary Form</h2>
  //form content is here
</form>

＆＃13;

如何进行验证但jquery表单不显示

2 个答案: