How to validate only on submit or user input using the HTML 5 Attributes?

Question

I just want to validate the fields only when user interacts with the field or submits the form.

Below is the code I am using:

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" name="titleOfTheEmailField" id="titleOfTheEmailField" onchange="updateTitle()" required>
    <label class="mdl-textfield__label" for="sample3">Title...</label>
</div>

Here is the output:

But I want this output only after the user interacts with the field or submits the form.

This is not a duplicate of How to force a html5 form validation without submitting it via jQuery , it is the exact opposite of that question.

P.S: I am using Material Design Lite for my web application.