0

Не работает required и autofocus в модальном окне как пофиксить?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JobBoard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class = "header">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container">
                    <a class="navbar-brand" class = "navbar-logo" href="#"><img src="images/logo.png" alt="Job Finder"></a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav navbar-main-text">
                            <li class="nav-item">
                                <a class="nav-link active me-5" href="#">Employers</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active me-5" href="#">Portfolio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active me-5" href="#">About us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Team</a>
                            </li>
                        </ul>
                        <button type="button" class="btn btn-primary signUp-btn" data-bs-toggle="modal" data-bs-target="#signUpModal">
                            Sign Up
                        </button>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <footer></footer>



    <!-- Modal window -->
    <div class="modal fade" id="signUpModal" tabindex="-1" aria-labelledby="signUpLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="signUpLabel">Registration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="row g-3 needs-validation" novalidate>
                        <div class="col-lg-12">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username" placeholder="Zesshi" name="username" nrequired>
                        </div>
                        <div class="col-lg-12">
                            <label for="userEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="userEmail" placeholder="[email protected]" name="userEmail" required>
                        </div>
                        <div class="col-lg-12">
                            <label for="userLog" class="form-label">Login</label>
                            <input type="text" class="form-control" id="userLog" placeholder="Zesshi" name="userLog" required>
                        </div>
                        <div class="col-lg-12">
                            <label for="userPass" class="form-label">Password</label>
                            <input type="password" class="form-control" id="userPass" placeholder="Rofler" name="password" required>
                        </div>
                        <div class="row mt-3 justify-content-end">
                            <div class="col col-lg-3">
                                <button type = "reset" class = "btn btn-primary">Очистить</button>
                            </div>
                            <div class="col col-lg-3">
                                <button type= "submit" class="btn btn-primary">Отправить</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
2
  • Прогоняйте свой код через HTML-валидатор перед тем как спрашивать, что не так. У вас 2 ошибки. 64 стока - несуществующий атрибут nrequired. 20 строка - дублируется атрибут class; required не будет работать с novalidate. Атрибут autofocus не будет работать в модальном окне без JS.
    – Neverm1ndo
    Commented 16 июл. 2022 в 22:36
  • Спасибо большое,про валидатор даже не знал,не так давно начал изучать Html и Css буду знать теперь и проверять,и также спасибо про novalidate и required,Всё получилось
    – user508572
    Commented 16 июл. 2022 в 22:49

1 ответ 1

0
  1. тут как минимум опечатка <input type="text" class="form-control" id="username" placeholder="Zesshi" name="username" nrequired> должно быть required

  2. чтобы работал autofocus , нужна такая реализация:

const signUpModal = document.getElementById('signUpModal')
const username = document.getElementById('username')


signUpModal.addEventListener('shown.bs.modal', () => {
  username.focus()
})

Документация: ссылка

6
  • Исправил опечатку,но всё равно required не работает
    – user508572
    Commented 16 июл. 2022 в 22:18
  • И не подскажете где именну реализацию для autofocus прописать?
    – user508572
    Commented 16 июл. 2022 в 22:19
  • @Zesshi для autofocus нужно это прописать в файле js Commented 16 июл. 2022 в 22:21
  • Спасибо,но вопрос по required все ещё остался не понятным для меня
    – user508572
    Commented 16 июл. 2022 в 22:24
  • @Zesshi сейчас посмотрю документацию Commented 16 июл. 2022 в 22:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.