如果文本框为空，则在单击提交按钮后将用户保留在同一 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 请帮助！

Answer 1

在你的代码中，我看到它可以通过验证，即使我只是放了一些空格，所以你应该在你的代码上使用修剪。例如$.trim($('#a1').val())为什么我调用将整个语句放在 $.trim 中，因为在早期，如果我调用 .trim() 值，它会在 IE7 中中断。您需要的第二件事是 jQuery 中的焦点，例如，如果您想专注于某个输入标签。只需致电$("#a1").focus();您使用的命名约定看起来不太好。您应该以易于理解代码的约定命名 div。

Answer 2

这里的关键词是“专注”。您正在尝试将键盘焦点放在特定输入（文本框）上。您只需使用 jQuery 的focus()函数将键盘焦点设置在特定输入上。但是，您将希望谨慎使用它。有时，用户以与您想象的不同的顺序从文本框移动到文本框。也许他们正在从一张纸上读取信息并按照该顺序填写。意外跳转键盘焦点会使您的网站更难使用，因此在设置焦点时要小心。