jQuery计算器-执行验证而不是计算器

我制作了一个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."
          }

        }
    });
});