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.

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>

Sinnbeck

3 years ago

Level 102

This code

userMsg.innerText="It's required";

You never define userMsg. What is it supposed to be be?

zxywvu

3 years ago

Level 1

I change this code,

if (x.length===0){
    errorMsg.innerText="It's required";
}

But it has a problem I see the message on the first text box, How to put it all?

Sinnbeck

3 years ago

Level 102

@esfer you need to find the correct one somehow. Using jquery for this might make this a bit easier if you are not 100% confident navigating the dom with pure Javascript

Also I notice that you still have a form inside a table tag, and no tr tag

zxywvu

3 years ago

Level 1

@Sinnbeck I change this code

<table>
<tbody>
    @foreach($competitions as $competition)
		<tr>
        <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>
			</tr>
        </form>
    @endforeach
</tbody>
</table>

Sinnbeck

3 years ago

Level 102

@esfer you still have a form tag inside the table definition. It is only allowed wrapping the whole table, or inside a td. But as you are using Javascript, you don't need it

If you open the source code (elements tab) in Chrome, you should see the browser trying to fix it for you I think. Or you get a warning in the console tab

zxywvu

3 years ago

Level 1

@Sinnbeck Can you guide me on where to put the form tag? Or if I don't use JavaScript. So what should I use?

Sinnbeck

3 years ago

Level 102

@esfer if you don't want to use Javascript, you will need to find a way to put all of your logic inside a single cell. So removing the form and using Javascript is probably best

What you need to do is detect the button being clicked on. (you already have this part). Then based on that click event, find the buttons parent tr, and from there find the correct error element. Doing this with jquery is probably easier

zxywvu

3 years ago

Level 1

@Sinnbeck can you send complete your code?

zxywvu

3 years ago

Level 1

@Sinnbeck ???

Sinnbeck

3 years ago

Level 102

@esfer uh sorry no that is not how this works. I don't have the complete code in my head so I would need to spend some time doing research on it.