javascript - 如果文本框为空，则在单击提交按钮后将用户保持在同一个 div 中

Question

我有一个问题，过去 2 天我一直在努力解决这个问题，但仍然没有找到解决方案。 我有一个带有 4 个 div 的 html 页面。 每个 div 都有 3 个输入字段和一个按钮。 如果文本框为空，那么即使在单击提交按钮后用户也应该在同一个 div 中，但在我的情况下，他们将被重定向到另一个 div。 我该如何解决这个问题？ 如果文本框为空，还会显示警告并且不允许用户继续下一步。

代码:

<div class="col-sm-12">          
                  <label> <i class="fa fa-paper-plane px-2"> </i> Send To Address</label>
                  <div class="form-group">
                    <input type="text" id="a1" class="form-control" placeholder="Address">
                  </div>
                  </div>      
                 <div class="col-sm-12">          
                  <label style="width: 100% !important"> <i class="fa fa-money px-2"> </i> Amount <span class="pull-right"> Max Amount: --- </span></label>
                  <div class="form-group">
                    <input type="text" id="x1"class="form-control" placeholder="Enter the Amount">
                  </div>
                  </div> 
                  <div class="col-sm-12 text-right">
                  <span class="btn btn-sm btn-info btn1" id="b1"> <small> Continue </small> </span>      
                  </div>          
                      </div>
                    </div>
                    <div class="tab-pane t2" id="account">
                      <h5 class="info-text"> </h5>
                      <div class="row justify-content-center">

                  <div class="col-sm-12">          
                  <label> <i class="fa fa-paper-plane px-2"> </i> Send To Address</label>
                  <div class="form-group">
                    <input type="text" class="form-control" value="Address" disabled>
                  </div>
                  </div>      
                 <div class="col-sm-12">          
                 <label style="width: 100% !important"> <i class="fa fa-money px-2"> </i> Amount <span class="pull-right"> Max Amount: --- </span></label>
                  <div class="form-group">
                    <input type="text" class="form-control" value="Amount Entered" disabled>
                  </div>
                  </div> 

j查询:

$(document).ready(function(){
       $('#b1').click(function(){
            if ($('input#a1#x1').val() == ""){
                alert('Please complete the field');
            }
        });
    });

我尝试了很多解决方案，但都只显示警告，但仍然重定向到另一个 div 请帮忙!!

Answer 1

在你的代码中，我看到它可以通过验证，即使我只是放了一些空格所以你应该在你的代码中使用 trim 。

例如

$.trim($('#a1').val())

为什么我调用 put the whole statement in $.trim 因为在早些时候，如果我在 value 上调用 .trim() 它会在 IE7 中中断。

您需要做的第二件事是专注于 jQuery，例如，如果您想专注于某些输入标签。只需调用

$("#a1").focus();

您使用的命名约定看起来不太好。您应该按照您可以轻松理解代码的约定命名 div。