предотвратить отправку бланка

Question

Если я хочу запретить отправку моей формы, если поля не заполнены, и выделить пустые поля. Код, который у меня есть, работает, если я пытаюсь отправить его, когда он пуст, но не отправляет, если поля заполнены. Я не могу понять, что я делаю неправильно. Пожалуйста, помогите

JavaScript код:

function CheckFields(){
    if((document.getElementById('title').value=="") || (document.getElementById("textfield").value=="")){
        const element = document.querySelector('form');
        element.addEventListener('submit',event =>{
            event.preventDefault();

            alert("Fill the form to be submitted");
            document.getElementById("title").style.backgroundColor=red;
            document.getElementById("title").style.backgroundColor=red;
        });
    }

HTML:

<input name="post" type="submit" value="Post" onclick="CheckFields();">

Answer 1

Повторно отправлено с: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation для получения ответа на этот вопрос c, поскольку веб-страница может измениться

---

Использование встроенного в проверке формы Одной из наиболее важных функций HTML5 элементов управления формой является возможность проверки большинства пользовательских данных без использования JavaScript. Это делается с помощью атрибутов проверки на элементах формы. Мы видели многие из них ранее в курсе, но резюмируем:

обязательный: указывает, нужно ли заполнять поле формы перед тем, как форма будет отправлена. minlength и maxlength: определяет минимальную и максимальную длину текстовых данных (строки)

min и max: указывает минимальное и максимальное значения типов числового ввода

type: указывает, нужны ли данные быть номером, адресом электронной почты или другим заданным типом c.

шаблон: Указывает регулярное выражение, которое определяет шаблон, которому должны следовать введенные данные.

Answer 2

Вы можете проверить форму разными способами. В Html 5 форму вы можете добавить необходимые для проверки на стороне клиента. Вы также можете проверить форму со стороны сервера. И вы также можете использовать ajax для проверки формы в реальном времени. Используйте фокус на поле .., чтобы выделить поле, которое не заполнено.

Answer 3

Вы можете добавить required в поля ввода для проверки на стороне клиента. Для более расширенной проверки вы можете добавить проверку на стороне сервера через модель.

См. required в действии:

            <form action="/action_page.php">
                <label for="fname">First name:</label><br>
                <input type="text" id="fname" name="fname" value="" required><br>
                <label for="lname">Last name:</label><br>
                <input type="text" id="lname" name="lname" value="Doe"><br><br>
                <input type="submit" value="Submit">
            </form>

Answer 4

В общем, это неправильный способ проверки полей, но в любом случае ваша ошибка - это порядок условия и события отправки формы. Так должно быть так:

var myForm = document.querySelector('form');
var myTitle = document.getElementById('title');
var myTextfield = document.getElementById('textfield');
myForm.addEventListener('submit', event=>{
     if(myTitle.value=="" || myTextfield.value==""){
         alert("Fill the form to be submitted");
         myTitle.style.backgroundColor=red;
         myTextfield.style.backgroundColor=red;
         return false;
     } else {
         return true;
     };
});