Required veriant

Hi All

I have a required variant and works fine in chrome ect as they support required="true"

but in safari it wont display the error and still adds the item to basket any ideas

<perch:if not-exists="has_variants">
    <perch:form id="add_to_cart" app="perch_shop">
        <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
        <perch:input type="submit" value="&#xf217; Add to Basket" class="add-to-cart button left" />
    </perch:form>
</perch:if>
<perch:if exists="has_variants">
     <perch:form id="add_to_cart" app="perch_shop">
        <perch:error for="all" type="general">---- This error wont display in safari  just adds to basket -----
         Sorry, something went wrong and the form was not sent. Please see the messages below.
        </perch:error>
        <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" />" />
         <perch:input type="submit" value="&#xf217; Add to Basket" class="add-to-cart button left" />
             <perch:input id="product" type="select" options="<perch:shop id="_variant_opts" type="hidden" />" placeholder="Course Dates" required="true" />

        </perch:form>
    </perch:if>