How show basic validation messages in the text field

Question

I want to show the validation messages below the text fields that require it as well as the example that is in the image that I found

Example

I have the following text fields on my form, with their respective validation done in Javascript

//Function to validate ticket form
function validate_form() {
    valid = true;

    if (document.ticketForm.matricula.value == "") {
        alert("Verify the data again, enter the license plate");
        valid = false;
    }

    if (document.ticketForm.nombre.value == "") {
        alert("Verify the data again, enter the name of the applicant");
        valid = false;
    }

    return valid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form name="ticketForm" method="post" onchange="validate_form();">
                <div id="informacionTicket" class="user">
                    <div class="card shadow mb-4">
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="form-group">
                                    <label for="ticketIdAppliInput">License:</label>
                                    <input maxlength="9" required id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user" />
                                </div>
                                <div class="form-group">
                                    <label for="ticketNameAppliInput">Full name:</label>
                                    <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" />
                                </div>
                                <div class="form-group">
                                    <label for="ticketEmailAppliInput">Email:</label>
                                    <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button>
</form>

What I don't want is to be shown those annoying alert at the top of the form

I want the message to be displayed as in the example image

UPDATE:

Try this possible solution but when entering a value the message is no longer deleted

UPDATE:

I tried the possible solution of @JarlikStepsto but it still doesn't work properly

function validate(field) {
    const validateables = document.getElementsByClassName('validateable');
    const input = field;
    if (!input.value == "") {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }

    if (!input.value == "") {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>

UPDATE 2:

I will explain it better, I have two fields that matter to me that are compulsory "Matricula" and "Nombre Completo", when I am filling out the third field I do not get the validation message, this is the code I have, will I be doing something wrong?

function validate(field) {
    const input = field;
    if (!input.value || input.value.length === 0) {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="email" for="ticketEmailAppliInput">Email:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el correo electronico
                                    </div>
                                </div>

Answer 1

To show a validation message under the field you need a element to display it.

It could be any div, span or whatever you want.

In my example i will use a span to demonstrate how it works:

<input onchange="validate();" type="text" class="validateable" validation-pattern="[0-9]*" />
    <div class="validation-message">Only numbers are allowed in this field!</div>

now in the js code we just have to validate for the pattern and set a input to invalid if it does not match the pattern:

function validate(){
  const validateables = document.getElementsByClassName('validateable');
  Array.prototype.forEach.call(validateables, input => {
        const pattern = input.getAttribute('validation-pattern');
    if(!input.value.match('^' + pattern + '$')){
        input.classList.add('invalid');
    } else {
        input.classList.remove('invalid');
    }
  });
}

and the css to display validation text only if invalid:

.validation-message {
  display: none;
}

input.validateable.invalid + .validation-message{
  display: block;
  color: red;
}

What this code does:

The JS function looks for every input with the class "validateable" and iterates over them. Each element should have an attribute with an validation pattern validation-pattern="[0-9]*" Now the function checks, if the value of the input matches the pattern and add a class invalid to the input or removes it. In the css i defined an invisible div validation-message but if the element bevor this div is an validateable input field, that is invalid, the div will be displayed and you can see the validation message.

Working fidle: https://jsfiddle.net/h687eomf/

UPDATE:

in your case, you just want to validate the field, that you are changing, have a look at my changed example fidle: https://jsfiddle.net/h687eomf/2/

UPDATE 2:

A try to fix your snippet, assuming that a field is valid when its value is not empty and invalid if the value is empty:

function validate(field) {
    const input = field;
    if (!input.value ||  input.value.length === 0) {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>