Блог

Главная - Вопросы по программированию - как отобразить сообщение о проверке onsubmit на стороне клиента в javascript, кроме всплывающего окна с предупреждением?

как отобразить сообщение о проверке onsubmit на стороне клиента в javascript, кроме всплывающего окна с предупреждением?

#javascript

#javascript

Вопрос:

Я хочу проверить входные данные формы перед отправкой на сторону сервера, поэтому я использую onsubmit, но я хочу показывать каждое сообщение об ошибке отдельно, не используя ‘alert’, возможно ли это? Как это сделать? Или onsubmit может возвращать сообщение только поверх предупреждения?

Обновление Я уже проверил каждый из входных данных с помощью функций, и внутри каждой функции есть сообщения об ошибках. Но если я помещу эти функции в раздел «отправить», когда я нажимаю «Отправить», сообщение об ошибке не отображается. вот моя проверка:

 document.addEventListener("DOMContentLoaded", function () {
    myform.addEventListener("submit", function(){
    // validate all inputs
        validateName(); 
        validateEmail(); 
        validatePhone();
        validateAddress();
        validateCity();
        validatePost();
        validateProvince();
        validateProduct1();
        validateProduct2();
        validateProduct3();
        &etAtLeastOne();
        validateDelivery();
        //validate input before submit
        if (validateName() amp;amp; validateEmail() amp;amp; validatePhone() amp;amp; validateAddress() amp;amp;
        validateCity() amp;amp; validatePost() amp;amp; validateProvince() amp;amp; validateProduct1() amp;amp;
        validateProduct2() amp;amp; validateProduct3() amp;amp; &etAtLeastOne() amp;amp; validateDelivery())
        {
             // at least one product input is not empty
            if (product1 !="" || product2 !=""||product3 !="")
           {
                return true;
           }
           else{
               erorMessa&e.innerHTML =`Input fields are required.`;
               return false;
           }
        }
    });
    

});

Комментарии:

1. Типичный подход, используемый многими приложениями, заключается в проверке поля, как только фокус курсора смещается с него. При возникновении ошибки они просто отображают текст ошибки прямо над текстовым полем. Однако не уверен, ответил ли я на ваш вопрос. Я не на 100% уверен в том, о чем вы спрашиваете, tbh.

2. Пожалуйста, предоставьте соответствующий код.

3. Если вам нужны отдельные сообщения об ошибках, отобразите их в других элементах без использования alert .

Ответ №1:

Вам нужно использовать event.preventDefault() , чтобы остановить отправку формы, если есть проблемы. return false ничего не делает в обработчике событий, подключенном с помощью addEventListener .

 myform.addEventListener("submit", function(e) {
    // validate all inputs
    validateName();
    validateEmail();
    validatePhone();
    validateAddress();
    validateCity();
    validatePost();
    validateProvince();
    validateProduct1();
    validateProduct2();
    validateProduct3();
    &etAtLeastOne();
    validateDelivery();
    //validate input before submit
    if (validateName() amp;amp; validateEmail() amp;amp; validatePhone() amp;amp; validateAddress() amp;amp;
        validateCity() amp;amp; validatePost() amp;amp; validateProvince() amp;amp; validateProduct1() amp;amp;
        validateProduct2() amp;amp; validateProduct3() amp;amp; &etAtLeastOne() amp;amp; validateDelivery()) {
        // at least one product input is not empty
        if (product1 != "" || product2 != "" || product3 != "") {
            return true;
        } else {
            e.preventDefault();
            erorMessa&e.innerHTML = `Input fields are required.`;
        }
    }
});