JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="get" id="recipename">
<input type="text" id="name" name="name" class="recipe-name" value="Have a good name for it? Enter Here" onfocus="if (this.value == 'Have a good name for it? Enter Here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Have a good name for it? Enter Here';}" />
<input type="submit" class="submit-name" value="SUBMIT" />
</form>

JavaScript

var initVal = "Have a good name for it? Enter Here";
$(document).ready(function(){
    $(".submit-name").attr("disabled", "true");
    $(".recipe-name").blur(function(){
        if ($(this).val() != initVal && $(this).val() != "") {
            $(".submit-name").removeAttr("disabled");
        } else {
            $(".submit-name").attr("disabled", "true");        
        }
    });    
});