Javascript Safari未读取必填字段

我创建了一个选项字段，并将其设置为必填字段，它在Chrome/InternetExplorer/Android的internet上运行得非常完美。然而，当使用苹果的safari手机访问我的网站时，当客户试图继续并说这是必填字段时，必填字段不会阻止客户

<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST'>"?>
    <select class="productsize" name='size' required>
        <option value=''>Select a Size</option>
        <option value='Small'>Small</option>
        <option value='Medium'>Medium</option>
        <option value='Large'>Large</option>
        <option value='XL'>XL</option>
    </select>

---

目前，Safari不支持“必需”输入属性

---

请看这里：

请看这个问题，我知道如何设置必填字段？我不知道Safari不支持它，所以我正在寻找其他选项。那么，验证的另一个选项是什么呢？这里提出并回答了相同的问题，您可以查看此页面上的解决方案是否适合您。哇，你刚刚读懂了我的心思。我发现了，并试图让它工作，但警报消息…或该字段旁边的消息将不会显示。。。你知道为什么吗？我更新了我的问题以显示我所拥有的信息。此链接上的信息与您正在尝试执行的操作极为相关，可能需要很长时间才能阅读，但它应该可以帮助您了解表单将返回您希望的错误消息的情况。

                                            <div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST' id='formID'>"?>
                                            <select class="productsize" name='size' required><span id="sizeoptionMSG" style="margin-left:6px;color:darkred;"></span>
                                                <option value='' id="sizeoption">Select a Size</option>
                                                <option value='Small'>Small</option>
                                                <option value='Medium'>Medium</option>
                                                <option value='Large'>Large</option>
                                                <option value='XL'>XL</option>
                                            </select><br><br>
                                            <select class="productquantity" name='quantity'>
                                                <option value='1'>1</option>
                                                <option value='2'>2</option>
                                                <option value='3'>3</option>
                                                <option value='4'>4</option>
                                                <option value='5'>5</option>
                                                <option value='6'>6</option>
                                                <option value='7'>7</option>
                                                <option value='8'>8</option>
                                                <option value='9'>9</option>
                                                <option value='10'>10</option>
                                            </select>
                                        </div><br><br>
                                        <div class="productdetailaddbutton">
    <?php 
echo "<input type='hidden' name='product_id' value='$product_id' />
        <input type='submit' class='addtocart' name='add_to_cart' value='Add to cart' />";
    ?>


<script>
    var form = document.getElementById('formID'); // form has to have ID: 

<form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message
            document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border
            if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field
            alert('Please, select a size.'); // error message
        }
    }, false);
    </script>