Javascript not working in Safari in Mac OSX

Question

I have a payment page where a customer is entering their credit card details. I have removed all of the non-relevant sections.

What's weird is that my front-end validation works fine on FF, IE, and Safari for windows. It only is failing on Safari in Mac OSX.

Specific user agent strings that have had issues:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-us) AppleWebKit/530.19.2 (KHTML, like Gecko) Version/4.0.2 Safari/530.19
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_4_11; en) AppleWebKit/531.9 (KHTML, like Gecko) Version/3.1.2 Safari/525.22

For some reason, it is not forcing both month and year to be selected before submitting and back end validation is erroring out.

Any help would be greatly appreciated. I have not been able to reproduce.

Here is the code:

<form action="XXXXXXXX" class="full" id="schedule_payment" method="POST">


<select name="expiration_month" id="expiration_month">
    <option value="">Month</option>
    <option value="01">01 - Jan.</option>
    <option value="02">02 - Feb.</option>
    .......
</select> 
<select name="expiration_year" id="expiration_year">
    <option value="">Year</option>
    <option value="09">2009</option>
    <option value="10">2010</option>
    <option value="11">2011</option>
    .........
</select>


<input type="image" id="submit_image" src="confirm-details.png" value="Submit" alt="Confirm Details">
</form>




<script type="text/javascript">

$(document).ready(function(){

    $("#schedule_payment").validate({    
     submitHandler:function(form) {
      if ($("#new_card").attr("checked")) {
       if ($("#expiration_year").val() == "" || $("#expiration_month").val() == "") {
        alert("Please check the expiration date.");
        return;
       }

       var isExpired = false;

       if (parseInt("20" + $("#expiration_year").val()) < 2009 ) {
        isExpired = true;
       } else if (  (parseInt("20" + $("#expiration_year").val()) == 2009 ) & 
          (parseInt($("#expiration_month").val(),10) < parseInt(09,10))) {
        isExpired = true;
       }

       if (isExpired) {
        alert("Card is expired.  Please check expiration data and try again.");
        return;
       } 
      }
      form.submit();
    }, 
XXXXXX

Answer 1

if ($("#new_card").attr("checked")) {

this could be a problem as checked attribute is not always added to the input. you can try changing it to

if($("#new_card:checked").length){

or even

$('#new_card').each(function(){
if(this.checked){
}
})

if all else fail

Answer 2

I tend to like this style for checkboxes:

if($('#your_checkbox_id').is(':checked')) {
  alert('checked!');
} else {
  alert('not checked!');
}

Here’s another way of determining of a checkbox is checked:

if($('#your_checkbox_id:checked').length) {
  alert('checked!');
} else {
  alert('not checked!');
}

Answer 3

Have you opened the console in Safari? -- it should produce an error message if the code is wrong, and it has a full js debugger that might also help.