jQuery計算器 - 驗證執行代替計算器

Question

我做了一個jQuery計算器，它需要燃料量和燃燒速率來給出時間直到空顯示在我的屏幕上。我也正在使用表單驗證。

當我點擊計算器按鈕時，它會爲某些運行表單驗證，並嘗試運行服務器端代碼，如果單擊表單提交按鈕（並且該按鈕執行應該執行的方式），那很好。但我有我的計算器按鈕「ID」屬性和「名稱」屬性不同於表單提交按鈕。所以我不明白爲什麼當我點擊計算器按鈕時，它會嘗試運行表單驗證。另外，它沒有給我總計

$('#time-empty-field').val(time_empty); 

字段。理想情況下，我希望計算器在$（'time-empty-field'）中顯示總數，而不是運行表單驗證。

我知道我的HTML是好的，從我可以看到我沒有看到我的jQuery有什麼問題。也許不同的眼睛可以幫助解決這個問題。任何幫助將非常感激。謝謝！

$(function() { 
    $('#id').focus(); 
    // To clear phone example when active 
    $('#phone').focus(function() { 
      var field = $(this); 
      if (field.val() == field.prop('defaultValue')) { 
      field.val('').css('color', 'black'); 
      } 
    }); 
    // Reveals System Report 
    $('#system-box input').click(function() { 
     if ($(this).attr('checked')) { 
      $('#system-report').slideDown('fast'); 
     } else { 
      $('#system-report').slideUp('fast'); 
     } 
    }); 
    //Calculator 
    $('#calculator-submit-btn').submit(function() { 
     var fuel_amount = $('#fuel-amount-field').val(); 
     var burn_rate = $('#burn-rate-field').val(); 
     var time_empty = fuel_amount * burn_rate; 
     time_empty = time_empty.toFixed(2); 
     $('#time-empty-field').val(time_empty); 
    }); 
    // Form validation plug-In 
    $('#form1').validate({ 
     rules: { 
      id: { 
       required: true, 
       number: true 
      }, 
      password: { 
       required: true 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      } 
     }, 
     messages: { 
      id: { 
      required: "Please enter ID number." 
      }, 
      password: { 
      required: "Please enter password." 
      }, 
      phone: { 
      phoneUS: "Please enter a valid phone number." 
      } 

     } 
    }); 
}); 

Answer 1

$('#calculator-submit-btn').click(function() { 
     var fuel_amount = $('#fuel-amount-field').val(); 
     var burn_rate = $('#burn-rate-field').val(); 
     var time_empty = fuel_amount * burn_rate; 
     time_empty = time_empty.toFixed(2); 
     $('#time-empty-field').val(time_empty); 
    }); 

submit()只能在提交表單中使用。

更多細節CHEC jQuery的API：http://api.jquery.com/submit/

只要你不能submit()事件附加到一個按鈕，只有一種形式。