Есть примеры как реализовать js валидацию с разными подсказками?

Question

[Константин]

Как реализовать всплывающие подсказки в валидации типа такого с разным текстом в зависимости от ошибки?


Сейчас валидация выглядит так: просто подсвечиватеся красным в случае ошибки:

function validateForm() {
        $('.call-form button[type="submit"').click(function(e) {
            e.preventDefault();
            var name = $("#formNameCall");
            var email = $("#formEmailCall");
            var phone = $("#formPhoneCall");
            var nameVal = $("#formNameCall").val();
            var emailVal = $("#formEmailCall").val();
            var phoneVal = $("#formPhoneCall").val();

            if(nameVal.length > 2 && emailVal.length > 5 && phoneVal.length > 5) {
            var $data;
            $data = $(this).parent('form').serialize();
            $(".modal").addClass('modal--visible');
            $.ajax({
            url: 'test.ru',
            type: 'post',
            data: $data
        });
            }
            if(nameVal.length < 2) {
                name.css({'box-shadow':'inset 0 0 10px red'});
            } else {
                name.css({'box-shadow':'none'});
            }

            if(emailVal.length < 5){
                email.css({'box-shadow':'inset 0 0 10px red'});
            } else {
                email.css({'box-shadow':'none'});
            }

            if(phoneVal.length < 5){
                phone.css({'box-shadow':'inset 0 0 10px red'});
            }else {
                phone.css({'box-shadow':'none'});
            }

        });
    }

и html

<input id="formNameCall" type="text" maxlength="60"  placeholder="* Имя" name="formParams[full_name]" value=""><br>
                            <input id="formEmailCall" type="text" maxlength="60"  placeholder="* Email" name="formParams[email]" value="" ><br>
                            <input id="formPhoneCall" type="text" maxlength="60"  placeholder="* Номер телефона" name="formParams[phone]" value=""><br>