error labels do not contain any error messages during validation

Question

I have a form being validated with jQuery with rules and messages settings inside the validate function. However, when pressing submit or not filling in the fields firstname, lastname and phone number no validations messages appear. They only appear on the email and message fields. This is what the label tag looks like on the element page on the console.

I tried checking if its some issue in the css, or if the attributes in the html were wrong or missing.

$(document).ready(function () {
    var onloadCallback = function () {
        grecaptcha.render('google_recaptcha', {
            'sitekey': '6LfFSIUUAXXXXXXXXXXXDk7giXSN6Y8'
        });
    };

    // validate signup form on keyup and submit
    var validator = $("#contactform").validate({
        rules: {
            firstname: {
                required: true,
                minlength: 2
            },
            lastname: {
                required: true,
                minlength: 2
            },
            telephone: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 20
            }
        },
        messages: {
            firstname: {
                required: "Please enter your first name",
                minlength: jQuery.format("Please enter your first name")
            },
            lastname: {
                required: "Please enter your last name",
                minlength: jQuery.format("Please enter your last name")
            },
            telephone: {
                required: "Please enter your telephone number",
                minlength: jQuery.format("Please enter your telephone number")
            },
            email: {required: "Please enter a valid email address", minlength: "Please enter a valid email address"},
            message: {required: "Please enter a message", minlength: jQuery.format("Enter at least {0} characters")}
        },
        // set this class to error-labels to indicate valid fields
        success: function (label) {
            label.addClass("error");
        }
    });
});







            <form asp-action="Index" asp-controller="Home" method="post" id="contactform">
                <div class="contact_input_wrapper firstname">
                    <input type="text"  name="firstname" id="firstname" value="First name *"
                          
                           onFocus="if(this.value  == 'First name *') { this.value = ''; }"
                           onBlur="if(this.value == '') { this.value = 'First name *'; }"     class="required firstname"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper lastname">
                    <input type="text" name="lastname" id="lastname" value="Last name *"
                            
                           onFocus="if(this.value  == 'Last name *') { this.value = ''; }"
                           onBlur="if(this.value == '') { this.value = 'Last name *'; }" class="required lastname"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper email">
                    <input type="text"  value="Email address *" name="email"
                           onFocus="if(this.value  == 'Email address *') { this.value = ''; }"
                           onBlur="if(this.value == '') { this.value = 'Email address *'; }" class="required email"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper telephone">
                    <input type="text" id="telephone" name="telephone" 
                           for="telephone" value="Telephone number *"
                           onFocus="if(this.value  == 'Telephone number *') { this.value = ''; }"
                           onBlur="if(this.value == '') { this.value = 'Telephone number *'; }" class="required telephone"
                           role="input" aria-required="true"/>
                </div>
                <div class="message_wrapper">
                    <textarea rows="6" name="message" id="message" value="Your message *"
                              for="message"
                              onFocus="if(this.value  == 'Your message *') { this.value = ''; }"
                              onBlur="if(this.value == '') { this.value = 'Your message *'; }" class="required message"
                              role="textbox" aria-required="true"></textarea>
                </div>

                <div class="required_info">* required fields</div>
                <div class="clear">

                </div>

                <div class="g-recaptcha"
                     data-sitekey="6LeSMfseAAAAAPyaB_P1oJgRawA6hK8vfTHFmsFi">
                </div>
                <div class="clear">

                </div>
                <div class="required_info_captcha">* recaptcha is a required field </div>
                <div class="clear">

                </div>
                <input
                    onclick="ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Clicked', eventLabel: 'Form submission'});"
                    type="submit" id="submit" name="submit" class="submit" value="SEND">
            </form>

Answer 1

Issue was that tag attribute value was being set from the start

value = "First name *"

Value was set in order to facilitate an if statement within the html so on blur the value would appear ie First name. And On Focus disappear.

No validation occurred because the values were already set.

I solved it like this:

 <form asp-action="Index" asp-controller="Home" method="post" id="contactform">
                <div class="contact_input_wrapper firstname">
                    <input type="text"
                           placeholder="First name *"
                           name="firstname"
                           id="firstname"
                           class="required firstname"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper lastname">
                    <input type="text"
                           placeholder="Last name *"
                           name="lastname"
                           id="lastname"
                           class="required lastname"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper email">
                    <input type="text"
                           placeholder="Email *"
                           name="email"
                           class="required email"
                           role="input" aria-required="true"/>
                </div>
                <div class="contact_input_wrapper telephone">
                    <input type="text"
                           placeholder="Telephone *"
                           id="telephone"
                           name="telephone"
                           for="telephone"
                           class="required telephone"
                           role="input" aria-required="true"/>
                </div>
                <div class="message_wrapper">
                    <textarea type="text" rows="6" 
                              placeholder="Your message *"
                              name="message" 
                              id="message" 
                              for="message"
                              class="required message"
                              role="textbox" aria-required="true"></textarea>
                </div>

                <div class="required_info">* required fields</div>
                <div class="clear">

                </div>

                <div class="g-recaptcha"
                     data-sitekey="6LeSMfseAAAAAPyaB_P1oJgRawA6hK8vfTHFmsFi">
                </div>
                <div class="clear">

                </div>
                <div class="required_info_captcha">* recaptcha is a required field </div>
                <div class="clear">

                </div>
                <input
                    onclick="ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Clicked', eventLabel: 'Form submission'});"
                    type="submit" id="submit" name="submit" class="submit" value="SEND">
            </form>

input:focus::placeholder {
    color: transparent;
}
textarea:focus::placeholder {
    color: transparent;
}
::placeholder {
   color: #FFFFFF;

}