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

标签 javascript jquery css twitter-bootstrap

你好,我正在使用 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 工作正常,因为我尝试了一个警报,当我按下提交按钮时它显示了。

提前致谢!

最佳答案

您的代码中有 3 个主要错误:

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

  2. 如果您想在提交前检查您的输入,则不应使用 type="submit",因为它会在您单击按钮时提交表单。如果用户想先检查您的输入,请使用 type="button"

  3. Class 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>

关于javascript - 如果表单字段的输入值为空,则尝试使用 jQuery 显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56921045/

相关文章:

jquery - 单击侧边栏中的元素时防止主窗口滚动

css - 检查数据属性是否设置在父 div css/less 并将其用于子 div

css - 使列表项向左浮动并堆叠起来,下方没有空间

javascript - 如何使用 $http POST 和 Angular-Payments 传递电子邮件地址以及 strip token ?

asp.net - 使用 jquery.load 将对象数组传递给 MVC 3

javascript - 写一个一元函数链接器,在 codewars 上出现 TypeError 但在 repl.it 上没有错误?

javascript - 无法在 sessionStorage 中保存数据

html - 为什么 `width:100%; height:100%; object-fit: contain;` 无法使 <video> 适合其容器?

javascript - 在我的案例中,如何使用 createSwitchNavigator 从注销导航到登录屏幕?

javascript - 如何将 IF 转换为 JavaScript 中的 SWITCH 语句?