Question

我创建了一个选项字段，然后将其设置为必填字段，它在Chrome / Internet Explorer / Android的互联网上运行良好。但是，当使用Apple的移动设备访问我的网站时，必要的字段不会在尝试继续时停止客户并说这是必填字段。

<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>

除了html5＆＃39;还需要＆＃39;还有什么我需要添加的东西。这个字段使它适用于Safari或为什么这不起作用？

如果Safari不支持，那么我可以采用另一种方式来实现此字段吗？

更新：在弄清楚它是否得不到支持之后，我尝试用它做一些JS，但我的消息或警告不会显示。但是，除非选择尺寸，否则它不允许客户向前移动，但我需要显示消息以便他们知道原因。

                                            <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>

Answer 1

此时，Safari不支持＆＃34;必需＆＃34;输入属性。

见这里：http://www.w3schools.com/html/html_form_attributes.asp

Safari不读取必填字段

1 个答案: