JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

enter text 1
<input type="text" id="text1" />
<br>enter text 2
<input type="text" id="text2" />
<br>enter text 3
<input type="text" id="text3" />
<br>
<input type="button" id="btnValidate" value="Validation" />
    <a href="#" id="link">click here </a>

JavaScript

/*add dynamic validation with custom message and focus out property*/

function showMessage(afterElement, message) {
    afterElement.next("span").remove();
    afterElement.after("<span> " + message + "</span>");
    return false ; 
}

function removeMessage(afterElement) {
    $(afterElement).nextAll("span").remove();
}
var varMessageReturnVal; 
if(varMessageReturnVal==false)
{//disable link
}
else {
//enable link
}
$("#text1").on("focusout",function(){
    if ($(this).val() === "") {
        showMessage($(this), "Please enter First Name ");
    } else {        
        removeMessage($(this));
    }
});
$("#link").on("click", function () {
    if ($("#text1").val() === "") {
        showMessage($("#text1"), "Please enter First Name ");
    } else {        
        removeMessage($("#text1"));
    }
    if ($("#text2").val() === "") {
        showMessage($("#text2"), "Please enter Last Name");
    } else {
        removeMessage($("#text2"));
    }
});