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(); 
      } 

現在我只需要弄清楚爲什麼我的控制檯沒有拋出第一個錯誤。 ; _;