Plain JavaScript Custom Validation Run Validation on keyup

Question

I wrote a custom JavaScript validator that needs to run on every keyup event that is attached to ever input and runs the vacillator() for every input field.

Problem is that it only works on load. I want to to work on every key-up event. Here is a jsfiddle https://jsfiddle.net/vo1npqdx/717/

function display_error(elem, message) {
    elem.insertAdjacentHTML('afterend', "<label class='js-error' style='color:red;' >" + message + "</label>");
}

function check_error(elem) {
    error_label = elem.nextElementSibling
    if (error_label && error_label.classList.contains('js-error')) {
        return true;
    }


}

function add_error(elem,message) {
    if (!check_error(elem)){
        display_error(elem, message)

    }

}

function delete_error(elem) {
    if (check_error(elem)){
        elem.nextElementSibling.remove();      

    }

}

function validateForm(elem) {
alert("Checking if form is vaild")

    // If input type == text
    if (elem.getAttribute("type") == 'text') {
        //alert("elemcent is text")

        maxlength = elem.getAttribute("maxlength")
        minlength = elem.getAttribute("minlength")
        data_error = elem.getAttribute("data-error")


        // if has attribute maxlegnth
        if (minlength) {
            // if value is under min length
            if (elem.value.length < parseInt(minlength)) {
                // add errors
                add_error(elem, data_error)
                //alert("above min length")

            } else {
                // Delete
                //alert("delere errror")
                delete_error(elem)

            }
        }


        }

        // if input type == number
            if (elem.getAttribute("type") == 'number') {
        //alert("element is text")

        max = elem.getAttribute("max")
        min = elem.getAttribute("min")
        data_error = elem.getAttribute("data-error")


        // if has attribute maxlegnth
        if (min) {
            // if value is under min length
            if (elem.value < parseInt(min)) {
                // add errors
                add_error(elem, data_error)
                //alert("Belove Min Number")
            }
            else if(elem.value > parseInt(max)){


                // add errors
                add_error(elem, data_error)
                //alert("above Max number")
            }
            else {
                // Delete
                //alert("delere errror")
                delete_error(elem)

            }
        }


        }



}

// Desired Result
// if keyup
    // for input in inputs:
        // someFunc(input) that makes input tags red
var inputs = document.getElementsByClassName('form-control');

for(var i=0;i<inputs.length;i++){
    elem = inputs[i]
  elem.addEventListener('keyup', validateForm(elem))

}

validateForm(elem) is a function call.

melpomene
– melpomene

2017-05-08 21:59:10 +00:00
Commented May 8, 2017 at 21:59 — melpomene
– melpomene, Commented May 8, 2017 at 21:59
How whould i fix this?

Holly Johnson
– Holly Johnson

2017-05-08 22:16:32 +00:00
Commented May 8, 2017 at 22:16 — Holly Johnson
– Holly Johnson, Commented May 8, 2017 at 22:16

spawnedc · Accepted Answer · 2017-05-08 22:32:21Z

2

You are calling your event handler straight away. It needs to be wrapped with a function. So this:

elem.addEventListener('keyup', validateForm(elem))

should be:

elem.addEventListener('keyup', function(event) {
    // do something with event
    validateForm(this);
});

edited May 8, 2017 at 22:32

answered May 8, 2017 at 21:59

spawnedc

4765 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Holly Johnson Over a year ago

Thank you for this. I replaced it with this and it works but it only runs the vaildator for the current input on keypress. I want it to run the validates for all inputs when key is pressed

Collectives™ on Stack Overflow

Plain JavaScript Custom Validation Run Validation on keyup

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related