Uncaught ReferenceError: userMsg is not defined

I want to validate the fields in a table so that they are not empty, and required.

If empty, (It’s required.) should appear near that field.

table

Here is my code, It shows an alert, but I want to show an It’s required. next to the field instead of an alert.

<table>
    @foreach($competitions as $competition)
        <form action="">
            <td class="align-middle">
                <input type="text" class="form-forecast showError" name="" id="" aria-label="">
                <span class="errorMsg"></span>
                <input type="text" class="form-forecast showError" name="" id="" aria-label="">
                <span class="errorMsg"></span>
            </td>
            <td class="align-middle">

                <button type="submit" class="btn btn-sm btn-secondary submit">ثبت</button>
            </td>
        </form>
    @endforeach
</table>

script

<script>
    const showError = document.querySelector(".showError");
    const errorMsg = document.querySelector(".errorMsg");
    const sub = document.querySelector(".submit");

    sub.addEventListener("click",function(event){
        event.preventDefault();
        errorMsg.innerText="";
        const x = showError.value;
        if (x.length===0){
            userMsg.innerText="It's required";
        }
    })

</script>