JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" name="myForm " onsubmit="return validateForm()" action="myprocessingscript.php" >                                         
                                                <input type="text" name="name"  placeholder="Name" class="text" id="name" />
                                                                                                <input name="email" placeholder="Email" type="text"   class="text" id="email"/>

<input name="number" placeholder="Mobile Number" type="text"  class="text"  id="number"/>

<input name="size"  placeholder="Size" type="text" class="text" id="size"  />
                                                                                        <input type="Submit" value="Submit" class="button">

JavaScript

function validateForm(){
    var x = document.getElementById('name');
    var email = document.getElementById('email');
    var num = document.getElementById('number');
    var size = document.getElementById('size');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var atpos=email.value.indexOf("@"); 
    var dotpos=email.value.lastIndexOf(".");

    if (x.value == null || x.value == "") {
    alert("Please Enter your name");
    x.focus();
    x.style.background = 'Yellow';
    return false;
    }
    if(!filter.test(email.value)){
    alert('Please provide a valid email address');
    email.focus();
    email.value="";
    return false;
    }
    if(num.value == null || num.value == ""){
    alert('Please enter your mobile number');
    num.focus();
    return false;
    }
        
    if(isNaN(num.value)){
    alert('Please enter a valid number');
    num.focus();
    num.style.background = 'Yellow';
    return false;
    }


}