JQuery проверяет множественный ввод при отправке

Я пытаюсь создать функцию jquery для проверки вводимых пользователем данных перед отправкой формы, но она показывает мне ошибку TypeError: $ival.val(...) is null, я не мог понять, что делаю неправильно. Я также не хочу использовать jQuery validate library, я хочу создать свою собственную простую проверку.

Проверка

function checkValidate(input_el){
    var status_check = true;
    var $ival = $(input_el);
        if (($(input_el).attr('type') == 'email' || $(input_el).attr('name') == 'email') && $ival.val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
            status_check = false;
        } else {
            var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
            if ($(input_el).attr('type') == 'tel' && (!filter.test($ival.val().trim()) || $(input_el).val().trim() < 8)){
                status_check = false;
            } else {
                if ($ival.val().trim() < 1) {
                    status_check = false;
                }
            }
        }   
    return status_check;
}

function setValidation(input) {
    var thisAlert = $(input).parent();
    $(input).addClass('inputHasError');
}

Функция сообщения

function postBusinessSetup(self, check) {
    if (check) {
        console.info('YES');
    } else {
        console.info('NO');
    }
}

Отправить код

$(document).on('submit', '#ExampleForm', function(e) {
    var inputs = $('.required-data', this);
    var check = true;
    var self = this;
    for(var i=0; i<inputs.length; i++) {
        if (checkValidate(inputs[i]) == false) {
            setValidation(inputs[i]);
            check = false;
        }
    }
    postBusinessSetup(this, check);
    e.preventDefault();
});

HTML

<form id = "ExampleForm">
    <input type = "text" class = "required-data"/>
    <input type = "email" class = "required-data"/>
    <input type = "tel" class = "required-data"/>
    <input type = "url" class = "required-data"/>
    <select class = "required-data"><option value = "hello">hello</option></select>
</form>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
146
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Возможно, функция обрезки при пустом входе вызывает ошибку.

$ival.val().trim()

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

var $val = $ival.val() ? $ival.val().trim() : ''

Я создал собственный метод проверки, как показано ниже:

var tester = '';

$('input').each(function () {

    var value = $(this).attr('value');

    value == '' ? tester += 'Please provide'+$(this).attr('name'): false;
});

if (tester == ''){

        //--------DO YOUR STUFF

    });
}else{
    alert(tester);
}

Другие вопросы по теме