使用jQuery尝试显示div如果表单字段的输入值为空

时间：2019-07-07 09:49:07

标签： javascript jquery css twitter-bootstrap

你好，我正在使用引导程序，尝试在未填充登录名/密码时显示警告div，但看起来却显示但又隐藏了，所以根本没有显示，这是代码：

<head>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script language="javaScript">  
        var namePattern = "^[a-z A-Z]{4,30}$";
        $(document).ready(function(){
            $("#bEnviar").click(function(){
                var login = $("#login").val();
                var password = $("#password").val();
                if( login=="" ){
                    $("#login").css("display","block");
                }
                if( password="" ){
                }
            });
        });
    </script>
</head>
<body>
    <form action="">
        <div class="form-group col-md-12">
            <label for="login" class="col-form-label">Login</label>
            <input type="text" id="login" class="form-control" placeholder="Login">             
            <div id="login" class="alert alert-danger d-none" role="alert-danger">
                Inserte nombre de usuario
            </div>
        </div>
        <div class="form-group col-md-12">
            <label for="password" class="col-form-label">Password</label>
            <input type="password" id="password" class="form-control" placeholder="Password">
            <div id="pass" class="alert alert-danger d-none" role="alert-danger">
                Inserte password
            </div>
        </div>
        <div class="form-group col-md-12"> 
            <button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
        </div>
    </form>
</body>

JavaScript运行正常，我尝试了一个警报，当我按下Submit按钮时，它会显示。

谢谢！

5 个答案:

答案 0 :(得分：2)

您的代码中存在3个主要错误：

  1. 有2个具有相同ID login的元素。

  2. 如果要在提交之前检查输入内容，则不应该使用type="submit"，因为单击按钮时它仍会提交表单。如果要先检查您的输入，请使用type="button"。

  3. 类d-none具有CSS display: none!important;，因此如果要显示div，则需要将其删除。

以下是修正这些错误后的代码：

var namePattern = "^[a-z A-Z]{4,30}$";

    $(document).ready(function(){
        $("#bEnviar").click(function(){
            var login = $("#login").val();
            var password = $("#password").val();

            if(!login) {
                $("#login_error").removeClass("d-none");
            } else $("#login_error").addClass("d-none");
            if(!password) {
                $("#pass").removeClass("d-none");
            } else $("#pass").addClass("d-none");
            
            if (login && password) {
              // Submit form
            }
        });

    });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form action="">
            <div class="form-group col-md-12">
                <label for="login" class="col-form-label">Login</label>
                <input type="text" id="login" class="form-control" placeholder="Login">             
                <div id="login_error" class="alert alert-danger d-none" role="alert-danger">
                    Inserte nombre de usuario
                </div>
            </div>

            <div class="form-group col-md-12">
                <label for="password" class="col-form-label">Password</label>
                <input type="password" id="password" class="form-control" placeholder="Password">
                <div id="pass" class="alert alert-danger d-none" role="alert-danger">
                    Inserte password
                </div>
            </div>
            <div class="form-group col-md-12"> 
                <button type='button' id="bEnviar" class="btn btn-primary">Ingresar</button>
            </div>

        </form>

答案 1 :(得分：0)

更改此

<div id="login_error" class="alert alert-danger d-none" role="alert-danger">

，然后在javascript中必须使用

$("#login_error").css("display","block");

，因为两个元素不能具有相同的ID。您在输入和div中都使用了登录ID，这将不起作用。

答案 2 :(得分：0)

您需要修复2个主要问题。

首先使表单操作指向同一页面。当action =“”时，它会重新加载页面；当action =“＃”时，它会指向页面中的某个内容。

第二秒，您的if（password =“”）逻辑应该是if（password ===“”）通知分配与比较。

然后，您只需要从id = pass div中删除d-none类

这是您代码的有效版本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <form action="#">
    <div class="form-group col-md-12">
        <label for="login" class="col-form-label">Login</label>
        <input type="text" id="login" class="form-control" placeholder="Login">
        <div id="login" class="alert alert-danger d-none" role="alert-danger">
            Inserte nombre de usuario
        </div>
    </div>

    <div class="form-group col-md-12">
        <label for="password" class="col-form-label">Password</label>
        <input type="password" id="password" class="form-control" placeholder="Password">
        <div id="pass" class="alert alert-danger d-none" role="alert-danger">
            Inserte password
        </div>
    </div>
    <div class="form-group col-md-12">
        <button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
    </div>

</form>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script>

      var namePattern = "^[a-z A-Z]{4,30}$";

      $(document).ready(function(){
          $("#bEnviar").click(function(){
            console.log('clicked #bEnviar');
              var login = $("#login").val();
              var password = $("#password").val();

              if( login === "" ){
                  $("#login").css("display","block");

              }
              if( password === "" ){
                $("#pass").removeClass('d-none');

              }
          });

      });
  </script>
</body>
</html>

答案 3 :(得分：0)

您好，正在提交表单时，页面正在重新加载。如果发生错误，您需要阻止表单提交。

您可以使用event.preventDefault()或return false

此外，每个元素的ID必须唯一。您正在将“登录”用作消息div和输入元素的ID。

希望以下代码段对您有所帮助。 

var namePattern = "^[a-z A-Z]{4,30}$";

$(document).ready(function() {
  $("#bEnviar").click(function(event) {
    debugger;
    var login = $("#login").val();
    var password = $("#password").val();

    if (login === "") {
      $("#login-err").removeClass("d-none");
      // use prevent default or return false
      event.preventDefault()
      return false;
    }
    if (password === "") {
      $("#password-err").removeClass("d-none");
      // use prevent default or return false
      event.preventDefault()
      return false;
    }
  });

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<form action="">
  <div class="form-group col-md-12">
    <label for="login" class="col-form-label">Login</label>
    <input type="text" id="login" class="form-control" placeholder="Login">
    <div id="login-err" class="alert alert-danger d-none" role="alert-danger">
      Inserte nombre de usuario
    </div>
  </div>

  <div class="form-group col-md-12">
    <label for="password" class="col-form-label">Password</label>
    <input type="password" id="password" class="form-control" placeholder="Password">
    <div id="password-err" class="alert alert-danger d-none" role="alert-danger">
      Inserte password
    </div>
  </div>
  <div class="form-group col-md-12">
    <button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
  </div>

</form>

答案 4 :(得分：0)

它出现然后消失的主要原因是默认情况下提交了表单。在尝试更改显示样式之前，您需要通过将event传递给click函数然后调用event.preventDefault()来防止这种情况。

要注意的另一点是对多个元素使用1 id。 IDs是唯一的，因此每个元素1 ID。因此，您还应该将错误divs重命名为login_error和password_error。

因此，您jquery应该这样：

    $(document).ready(function () {
        $("#bEnviar").click(function (e) {
            e.preventDefault();    //Prevent forms default behaviour
            var login = $("#login").val();
            var password = $("#password").val();

            // If the login value is not set
            if (!login) {
                $("#login_error").css("display", "block"); // This overrides d-none and makes it display
            }
            // If the password value is not set
            if (!password) {
                $("#password_error").css("display", "block");
            }
        });

    });

由于action中的form属性为空，因此您可以删除它而只拥有<form></form>

我假设您d-none中的html会转换为display-none，并将display中的error divs设置为none。否则，您必须先设置error divs以在none中显示css，然后再将script触发，并将它们设置为显示block。 下面的CSS应该这样做：

    <style>
        .form-group #password_error,
        .form-group #login_error {
            display: none;
        }
    </style>
相关问题
最新问题