JQuery验证：在Safari中“没有选择”

Question

我正在使用JQuery验证，它在Safari中做了最奇怪的事情。如果我没有选择任何东西，它会给我正确的错误信息。但只要我满足表单要求并点击提交，它就会刷新页面而不是提交表单。控制台消息是“没有选择，无法验证，不返回任何内容”。

这是我的验证脚本：

 

$(document).ready(function() { 
    /* ------------ 
     FORM #STORY1 
     ------------ */ 
    $('#class').focus(function(){ 
     $('#alum').attr('checked',true); 
    }); 
    $('#college').focus(function(){ 
     $('#transfer').attr('checked',true); 
    }); 
    /* The validation script */ 
    $("#story1").submit(function(){ return false; }); 
    // Turn our validator into a function 
    var story1Validate = function(form){ 
      $(form).find('div#err_msg').hide(); 
      $(form).find('#submitBtn').removeAttr('disabled'); 
      $(form).validate({ 
       debug:false, 
       submitHandler: function(form) { 
        $('#submitBtn').attr('disabled','disabled'); 
        $('#submitBtn').hide(); 
        $('#process').show(); 
        $('#recaptcha_widget_div').hide(); 
        form.submit(); 
       }, 
       errorContainer: $(form).find('div#err_msg'), 
       errorPlacement: function(error, element) { 
        $(form).find('div#err_msg').show(); 
        error.appendTo(form+' div#err_msg'); 
       }, 
       rules: { 
        type: "required", 
        class: { 
         required: "#alum:checked" 
        }, 
        college: { 
         required: "#transfer:checked" 
        }  
       },//rules 
       messages: { 
        type: "Please make a selection.", 
        class: { 
         required:"You indicated that you're an alum. Please enter the year you graduated." 
        }, 
        college: { 
         required:"You indicated that you're a transfer student. Please enter the name of the school to which you transferred." 
        } 
       }//messages 
      });//form validate 
    }//customValidation function 
    // Attach our custom form function to the form 
    story1Validate("#story1"); 
}); 

这是伴随形式的HTML：

 <form id="story1" name="story1" method="post" action="your-story/index.php" class="form-intro"> 
     <h3>I am a...</h3> 
     <p> 
      <input name="type" type="radio" class="input-radio" id="alum" value="alum" /> <label for="alum">Alum, class of</label><br /> 
       <input name="class" type="text" class="input-txt" id="class" value="" /> 
     </p> 
     <p> 
      <input name="type" type="radio" class="input-radio" id="transfer" value="transfer" /> <label for="transfer">Transfer student to</label><br /> 
       <input name="college" type="text" class="input-txt" id="college" value="" /> 
     </p> 
     <p> 
      <input name="type" type="radio" class="input-radio" id="student" value="student" /> <label for="student">Current student</label> 
     </p> 
     <p> 
      <input name="type" type="radio" class="input-radio" id="staff" value="staff" /> <label for="staff">Professor or staff member</label> 
     </p> 
     <p> 
      <input name="type" type="radio" class="input-radio" id="" value="other" /> <label for="other">None of the above</label> 
     </p> 
    <div id="err_msg"> 
    </div> 
     <footer class="form-nav"> 
      <input name="submitBtn" type="submit" class="input-btn" id="submitBtn" value="Next &gt;" /> 
     </footer> 
     </form> 

我只看到它这样做在Safari（Mac和PC）和偶尔当我提交表单时，点击Firefox中的后退按钮。似乎在IE中也能正常工作。

任何想法??这让我疯狂！

Answer 1

好的，我有一个朋友在他的Safari浏览器中看到它，并且HIS控制台在JS中抛出一个错误（尽管我没有）。显然我不应该命名任何输入字段“class”。我应该更清楚地知道。无论如何，在所有实例中将其从name =“class”更改为name =“classOf”，都摆脱了这一点。

然后我探索了一些，发现它不喜欢在form.submit（）之前禁用提交按钮。所以我改变提交处理程序只是：

   submitHandler: function(form) { 
       form.submit(); 
      } 

现在我只需要弄清楚为什么我的控制台没有抛出第一个错误。 ; _;