JSFiddle - React, Tailwind, and code Playground

HTML

<form name="myForm" onsubmit="return validateForm()" method="post">
    <label for="phone">Phone:</label>
    <input name="phone" id="phone" value="" placeholder="Phone..." type="text" />
    <button type="submit">Submit</button>
</form>
<div id="print"></div>

JavaScript

function validateForm() {
    var phone1 = document.forms["myForm"]["phone"].value;
    var phone2 = /^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;

    if (phone2.test(phone1)) {
        document.querySelector("div#print").innerHTML += "<p>valid: " + phone1 + "</p>";
        return true;
    }
    
    document.querySelector("div#print").innerHTML += "<p>invalid: " + phone1 + "</p>";
    return false;
}