2

В результате валидации формы добавляются классы к input'ам. При нажатии на кнопку "Отправить" необходима проверка на наличие класса 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>
1
  • добавьте в вопрос Ваш html
    – user176262
    28 сен 2017 в 19:29

1 ответ 1

1

    $("#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>

12
  • Ваше решение не работает 28 сен 2017 в 18:46
  • наше решение работает. Вы неправильно скопировали к себе мой код.
    – user176262
    28 сен 2017 в 18:52
  • Не форматируется код(: $(button).on("click", ".btn", function(){ if ( $("input.invalid").length > 0) { $(form).before('<div class="alert alert-danger"><strong>Не-не!</strong> Не все обязательные пол заполненны. Перепроверь.</div>'); return false; } return true; }) 28 сен 2017 в 18:59
  • И все же. Не работает. 28 сен 2017 в 19:07
  • что в консоли браузера?
    – user176262
    28 сен 2017 в 19:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.