时间戳

首页 > 解决方案 > 如果表单字段的输入值为空，则尝试使用 jQuery 显示 div

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

问题描述

您好，我正在使用引导程序尝试在未填写登录名/密码时显示警告 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工作正常，因为我尝试了一个警报，当我按下提交按钮时它显示。

提前致谢！

标签： javascriptjquerycsstwitter-bootstrap

解决方案

您的代码中有 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>

推荐阅读