How can I improve my validation in JavaScript?

How to improve my validation in JavaScript?

Namely I am wondering whether some parts of code can be shortened, improved, or removed althogether.

I don’t want to change the ES5 syntax because so far I am not familiar with Es6 syntax.

I also want to avoid using jQuery.

This is my validation code:
https://codepen.io/RobotHabanera/pen/NWbKJLe

   var form = document.querySelector('form');
    var errormessage = document.querySelector('.error-message');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        // musimy zalożyć czy formularz jest poprawnie wypełniony czy nie
        var errors = [];
        errormessage.innerHTML = '';
        var clearAllParagraphsAtTheStart = document.querySelectorAll('.form-group p');
        clearAllParagraphsAtTheStart.forEach(function(item) {
            item.innerHTML = '';
        });
        // sprawdzić czy walidacja bedzie działać
        for (var i = 0; i < form.elements.length; i++) {
            var field = form.elements[i];
            switch (field.name) {
                case 'email':
                    // najpierw negujemy funkcje hasMonkeyInFiled i jesli negacja przebiegnie prawidłowo to wykona się prawa strona komunikatu && bo
                    // jesli negacja nie przebiegnie prawidłowo to linijka z prawej sterony sie nie wykona.
                    !hasMonkeyInFiled(field) && errors.push({
                        email: 'Email musi posiadać znak @'
                    });
                    break;
                case 'name':
                    !hasMoreThanTwoChars(field) && errors.push({
                        name: 'Twoje imię jest za krótkie'
                    });
                    break;
                case 'surname':
                    !hasMoreThanSixChars(field) && errors.push({
                        surname: 'Twoje nazwisko jest za krótkie'
                    });
                    break;
                case 'pass1':
                    !hasCorrectPassword(field, form.elements[i + 1]) && errors.push({
                        pass1: 'Hasła nie są takie same lub puste'
                    });
                    break;
                case 'pass2':
                    !hasCorrectPassword(field, form.elements[i - 1]) && errors.push({
                        pass2: 'Hasła nie są takie same lub puste'
                    });
                    break;
                case 'agree':
                    !isChecked(field) && errors.push({
                        agree: 'Musisz zaakceptować warunki'
                    });
                    break;
            }
        }
        if (errors.length) {
            e.preventDefault();
            errors = errors.filter(function(v, i, a) {
                return a.indexOf(v) === i;
            });
            errors.forEach(function(item, index) {
                // wklej wartość klucza z tablicy errors gdzie nazwa klucza jest równa wartości danego data-validation bierzącego inputa z pętli
                var currentKey = Object.keys(errors[index]);
                var currentValue = Object.values(errors[index]);
                var inputs = document.querySelectorAll('.form-group input');
                inputs.forEach(function(item, index) {
                    if (item.dataset.validation == currentKey) {
                        var elementP = document.createElement('p');
                        elementP.innerHTML = currentValue;
                        item.after(elementP);
                    }
                });
                /* errormessage.append(elementP);  */
            });
        }
    });

    function hasCorrectPassword(field1, field2) {
        if (hasMatch(field1, field2) && hasNumberChar(field1) && hasNumberChar(field1)) {
            return true;
        }
        return false;
    }
    // paramertr 'field' to jest input element
    function hasMonkeyInFiled(field) {
        return field.value.indexOf('@') > -1;
    }
    // input ma wiecej niz 6 znakow
    function hasMoreThanSixChars(field) {
        return field.value.length > 6;
    }
    // input ma wiecej niz 2 znaki
    function hasMoreThanTwoChars(field) {
        return field.value.length > 2;
    }
    // checkbox musi byc zaznaczony
    function isChecked(field) {
        return field.checked;
    }
    // pierwsze i drugie hasło są identyczne ale nie puste
    function hasMatch(field1, field2) {
        // jak sprawdzic czy nie sa puste
        if (field1.value.length && field1.value.length) {
            return field1.value == field2.value;
        }
        return false;
    }
    // Warunek dla chętnych. Dodatkowe. Hasło ma mieć co najmniej 6 znaków (w tym co najmniej jedną liczbę i jedną literę)
    function hasNumberChar(field) {
        var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        var hasNumber = false;
        numbers.forEach(function(number) {
            if (field.value.indexOf(number) > -1) {
                hasNumber = true;
            }
        });
        return hasNumber;
    }

    function hasLetterChar(field) {
        var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var hasChar = false;
        chars.forEach(function(char) {
            if (field.value.toLowerCase().indexOf(chars) > -1) {
                hasChar = true;
            }
        });
        return hasChar;
    }
    // input ma wiecej niz 5 znakow
    function hasMoreThanFiveChars(field) {
        return field.value.length > 5;
    }

    function isPangram(string) {
        string.replace(/ /g, '');
        for (var i = 0; i < string.trim().length; i++) {
            var array = [];
            var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
            chars.forEach(function(char) {
                if (char == string.substr(string[i], 1)) {} else {
                    array.push(string[i])
                }
            });
        }
        if (array.length) {}
        // bierze pierwszą litere z tablicy i jedzie tą literą po wszystkich znakach tekstu 
        string.replace(/ /g, '');
        chars.forEach(function(char) {
            for (var i = 0; i < string.length; i++) {
                var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
                if (char == string[i]) {
                    console.log('jest');
                } else {
                    console.log('nie ma');
                }
            }
        });
    };

    function isPangram(string) {
        string.replace(/ /g, '');
        var array = [];
        var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        chars.forEach(function(char) {
            for (var i = 0; i < string.length; i++) {
                // każda litera alfabetu ma przejechać po tekście 
                if (char == string[i]) {
                    array.push(string[i]);
                } else {}
            }
            if (array.length > 0) {
                console.log('jest')
            }
        });
    };

86 thoughts on “How can I improve my validation in JavaScript?”

  1. 750859 704127The next time I learn a weblog, I hope that it doesnt disappoint me as significantly as this 1. I mean, I do know it was my choice to read, nevertheless I actually thought youd have something attention-grabbing to say. All I hear is actually a bunch of whining about something that you could fix for those who werent too busy in search of attention. 990917

    Reply

Leave a Comment