JSFiddle - React, Tailwind, and code Playground

HTML

<form onsubmit="return check()">
<div id="div1">
    <label id="name-label" for="full_name">Name</label>
    <input id="full_name" type="text" name="name" tabindex="1" autofocus="1" />
</div>

    <input type="submit" value="Submit"/>
</form>
<div id="error" >
<span class="error_message">Please enter your full name</span>
</div>

CSS

#error {
    color:red;
    display: none;
    border: 1px solid #D9534F;
    background: #FDF7F7;
    width: 80%;
    height: 25px;
    padding: 5px;
}

JavaScript

function check() {
    var bannedWords;
    var name= $('#full_name').val();
    if(name){
        if(name.length>5){
            for(var i=0;i<bannedWords.length;i++) {
                if(bannedWords[i] ==name){
                    $('#error').text('Its a banned word');
                    $('#error').css('display','inline-block');
                    return false;
                }
            }
                alert('form is going to be submitted');
                return true;
        }
        else{
            $('#error').text('Please choose higher amount');
            $('#error').css('display','inline-block');
            return false;
        }
    }
     $('#error').text('Name cant be blank');
     $('#error').css('display','inline-block');
    return false;
}