主页 / 问题 / 724451
Accepted
Konstantin Fedorov
Asked:2020-09-29 02:11:30 +0000 UTC2020-09-29 02:11:30 +0000 UTC

检查是否存在动态添加的类

  • 772

表单验证将类添加到input's. 当您点击“发送”按钮时，您需要检查该类是否存在invalid，这将显示一个警告，指出并非所有字段都已验证并禁止向数据库发送数据。我使用 jQuery 进行检查，但出现问题。

这是验证码：

var button = document.getElementById("submit-btn");
var input = document.getElementsByTagName("input");
var form = document.getElementsByTagName("form");   
$(button).on("click", ".btn", function(){
    if ( $(input).hasClass("invalid")) {
        $(form).before('<div class="alert alert-danger"><strong>Не-не!</strong> Не все обязательные поля заполнены. Перепроверь.</div>');
        return false;
    }
    return true;
})

但是代码不起作用，无论如何都会发送。

<!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>Issues</title>
    <link rel="stylesheet" href="validation.css">
</head>
<body>

<!-- HEADER -->
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">HELLO</a>
                <ul class="nav navbar-nav">
                    <li><a href="#">Здесь обработка</a></li>
                </ul>
            </div>
        </div>
    </nav>

<!-- MAIN_PAGE -->
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="issue-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи номер заявки:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <input type="text" class="form-control" id="issue-id" placeholder="Enter ISSUE_ID" required>
                </div>        
            </div>
            <div class="form-group">
                <label for="user-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID пользователя:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <input type="text" class="form-control" id="user-id" placeholder="Enter USER_ID" required>
                </div>        
            </div>
            <div class="form-group">
                <label for="action" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Выбери действие:</label>
               <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <select id="action" class="form-control" required>
                        <option>UPDATE</optiton>
                    </select>
                </div>     
            </div>
            <div class="form-group">
                <label for="entity" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Выбери тип изменения:</label>
                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                     <select id="entity" class="form-control" required>
                        <option>Изменить дату начала действия связи</optiton>
                        <option>Изменить дату окончания действия связи</optiton>
                        <option>Сопоставить ссылки на подразделение</optiton>
                     </select>
                 </div>     
            </div>
            <div class="form-group">
                <label for="new-value" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи новое значение:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <input type="text" class="form-control" id="new-value" value="2154.12.31 00:00:01" required>
                </div> 
            </div>
            <div class="form-group">
                <label for="entity" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label" >Выбери описание:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <select id="entity" class="form-control" required>
                        <option>Изменение даты начала действия связи</optiton>
                        <option>Изменение даты окончания действия связи</optiton>
                        <option>Сопоставление ссылки на подразделение</optiton>
                    </select>
                </div>     
            </div> 
            <div class="form-group">
                <label for="user-org-unit-assignment-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID связи с подразделением:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <input type="text" class="form-control" id="user-org-unit-assignment-id" placeholder="Enter USER_ORG_UNIT_ASSIGNMENT_ID" required>
                </div>        
            </div>
            <div class="form-group">
                <label for="organizational-unit-id" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Введи ID подразделения:</label>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <input type="text" class="form-control" id="organizational-unit-id" placeholder="Enter ORGANIZATIONAL_UNIT_ID" required>
                </div>        
            </div>
            <div class="form-group">
                <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <button class="btn btn-info"><i class="fa fa-database" id="submit-btn"></i>  Отправить</button>
                </div>
            </div>     
        </form>
    </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/validations.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/196edbff68.js"></script>
</body>
</html>
javascript

1 个回答

  1. Best Answer

        $("#submit-btn").on("click", function(){
      console.log("inside submit-btn click");
      console.log($("input.invalid").length);
      if ($("input.invalid").length > 0) {
        //$("form").before(...);
        console.log("do not submit");
        return false;
      }
      console.log("continue submit");
      return true;
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />
<input />
<br>
<button type="button" onclick="$('input').addClass('invalid');">Add Invalid</button>
<button type="button" onclick="$('input').removeClass('invalid');">Remove Invalid</button>
<button type="button" id="submit-btn">Submit</button>

    • 1

相关问题