jQuery Calculator - validation executes instead of calculator

Question

I made a jQuery calculator that takes Fuel amount and Burn rate to give Time til empty to display on my screen. I also am using form validation.

When I click on the calculator button it runs form validation for some and tries to run the server-side code which is fine if I was clicking on the form submit button (and that button performs the way it should). But I have my calculator button "id" attribute and "name" attribute different than the form submit button. So I don't understand why when I click on the calculator button it tries to run form validation. In addition, it doesn't give me the total in the

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

field. Ideally, I want the calculator to show the total in the $('time-empty-field') and not run form validation.

I know my HTML is fine and from what I can see I don't see anything wrong with my jQuery. Maybe a different set of eyes can help on this. Any help would be much appreciated. Thanks!

$(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() can be used on submit forms only.

for more details chec jQuery API : http://api.jquery.com/submit/

Simply you cannot attach submit() event to a button , only to a form.