A Way to Customize HTML Error Messages!

html_error_messages.js

    function set_custom_error_message(data) {
        var elements= $(data[0]);
        var message = data[1];
        for (var i = 0; i < elements.length; i++) {
            var my_element = elements[i];
            my_element.oninvalid = function(e) {
                e.target.setCustomValidity("");
                if (!e.target.validity.valid) {
                    e.target.setCustomValidity(message);
                }
            };
            my_element.oninput = function(e) {
                e.target.setCustomValidity("");
            }
        }
    }
    document.addEventListener("DOMContentLoaded", function() {
        var list_elements = [
            ['input.input_text', 'Name required with length between 3 and 64'],
            ['input.input_email', 'Valid Email Required'],
            ['input.input_mobile_number_2','Required Numbers with length between 8 and 12 (Optional)'],
            ['textarea.input_message','Dont you have anything to share with us?']
        ];
        list_elements.forEach(set_custom_error_message);
    })