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>