JSFiddle - React, Tailwind, and code Playground

HTML

<form id='form1'>

<input type='text' placeholder='test1' />
<input type='text' placeholder='test2' required />
<input type='number' placeholder='test3' />
<input type='number' placeholder='test4' required />

<br>
<p>


<button id='btnSubmit'  onclick="return CheckRequired()">Submit</button>

</p>

</form>

JavaScript

function CheckRequired()
   {
        
            var form = document.getElementById('form1');
            for(var i=0; i < form.elements.length; i++)
            {
                if(form.elements[i].value === '' && form.elements[i].hasAttribute('required'))
                {
                    
                    alert('There are some required fields!');
                    form.elements[i].focus();
                    return false;
                }
            }
            return ture;
}