Safari not reading required field

Question

I created an option field and with it I set it to a required field and it works perfect on Chrome/internet explorer/Android's internet. However, when going to my site with Apple's safari on mobile, the required field does not stop the customer when trying to proceed and saying that is a required field.

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

Is there something else I have to add other than the html5 'required' field for this to make it work on Safari or why isn't this working?

If Safari does not support it, what is another way I can implement this field to be required?

UPDATE: After figuring out it isn't supported, I tried doing some JS with it, but my message OR alert won't display. However, it doesn't allow the customer to move forward unless a size is picked, but I need the message to display so they know why.

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

please look at this question http://stackoverflow.com/questions/6048710/can-i-apply-the-required-attribute-to-select-fields-in-html5 — Satya, Jun 21 '15 at 17:16
I know how to make a field required? I didn't know Safari didn't support it, so I'm looking for other options. — Becky, Jun 21 '15 at 17:19

score 0 · Answer 1 · answered Jun 21 '15 at 17:17

0

At this time, Safari does not support the "required" input attribute.

See here: http://www.w3schools.com/html/html_form_attributes.asp

answered Jun 21 '15 at 17:17

Josh979

361
4
17

What would be another option of validation be then? – Becky Jun 21 '15 at 17:22
The same question was asked and answered here, you can see if the solution on this page works for you. http://stackoverflow.com/questions/23261301/required-attribute-not-work-in-safari-browser – Josh979 Jun 21 '15 at 17:35
Wow, you just read my mind. I found that and tried to get it to work, but the alert message...or the message next to the field won't display... Any ideas why? I updated my question to show what I have. – Becky Jun 21 '15 at 17:37
The information on this link is extremely relevant to what you're trying to do, it may be a long read, but it should help guide you to the point where your form will return an error message like you want it to. http://www.the-art-of-web.com/javascript/validate/ – Josh979 Jun 21 '15 at 19:36

Safari not reading required field

1 Answers1