Проверка формы Bootstrap 4 с неисправностью Vanilla JS

Question

Мне удалось создать скрипт для проверки формы Bootstrap 4, но каким-то образом сообщение об ошибке заменяет поле ввода. Есть ли элегантный способ проверки BS4 с помощью Vanilla JS, или я должен просто пойти по пути использования проверки Bootstrap? Какова лучшая практика в отрасли? Я впервые имею дело с проверкой формы.

Вот скрипка:

https://jsfiddle.net/wunrsjdy/

HTML:

          <div class="container">
            <div id="form">
              <h1 class="page-title">Quer Ser Nosso Cliente? Preencha o Questionário Abaixo</h1>



              <form id="form-user" action ="#" method="POST">
                <div class="form-group" id='errorTeste'>
                  <label for="name">Empresa</label>
                  <input type="text" class="form-control" id="name" name= "name" placeholder="">
                </div>

                <button type="submit" class="btn btn-primary" id="button-send">Enviar</button>
                </form>


            </div>

JS

const name = document.getElementById('name')
const form = document.getElementById('form-user')
const errorElement = document.getElementById('errorTeste')

form.addEventListener('submit', (e) => {
    let messages = []
    if (name.value === '' || name.value == null) {
        messages.push('Preencha o nome')
    }

    if (messages.length > 0) {

    e.preventDefault()
    errorElement.innerText = messages.join(', ')
    }
})

Answer 1

В вашей скрипке вы меняете атрибут innerText на errorElement. Но errorElement также (равен) вашему .form-group элементу:

const errorElement = document.getElementById('errorTeste')

// A little further down your html...
<div class="form-group" id='errorTeste'>

Я считаю, что это приводит к тому, что ваши элементы input и label в .form-group заменяются внутренним текстом.

Хотя я чувствую, что вы на правильном пути. Попробуйте показать другой элемент, который содержит стилизованное сообщение об ошибке / предупреждение, когда пользовательский ввод недопустим с использованием атрибута style.display элемента. Возможно, вы попытались присвоить идентификатор #errorTeste отдельному элементу сообщения об ошибке, но случайно присвоили его элементу .form-group? Просто предчувствие.

Вот хороший пример того, как вы можете заставить его выглядеть: