Why my form need two (2) clicks to submit using jQuery Validate?

Why my form need two clicks to submit using jQuery Validate?

contact_form.validate({ ... });

   $( document ).ready(function() {

       // CONTACT FORM
    
    var contact_form = $('#contact-form');
     contact_form.validate(
     {
        rules: {
        name: {
          //minlength: 2,
          required: true
        },
        email: {
          required: true,
          email: true
        },
        subject: {
         // minlength: 2,
          required: true
        },
        message: {
          //minlength: 2,
          required: true
        }
        },
        onfocusout: false,
        onkeyup: false,
        focusInvalid: false,
        showErrors: function() { 
            //
        },
        invalidHandler: function(event, validator) {
            $('#contact_form_validate').popup('open');
        },
        submitHandler: function(form) {
            //SUBMIT FORM
            $(form).submit(function() {
                //event.preventDefault();
                var str = $(this).serialize();
                //load proccess                 
                $.ajax({
                    url: 'process.mail.jsp',
                    type : 'POST',
                    data: str,
                    //dataType : 'json',
                    success: function(result){
                        //open modal
                        $('#contact_form_success').popup('open');
                        
                        
                        //empty form
                        $('#contact_form_success').on( "popupafterclose", function( event, ui ) {
                            $('#contact-form textarea, #contact-form input').val('');
                        } );    
                    }
                });
            }); 
        }
     });
    // end CONTACT FORM
 }); //jquery

/* 
    CONTACT
    --------------------------
*/

#contact-form {
    margin-left: -20px;
    margin-right: -20px;
}

#contact-form .row {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
    min-height: 80px;
    border-bottom: #F0F0F0 1px solid;
}

#contact-form .row:last-child {
    padding-bottom: 0;
    border: 0;
    margin-bottom: 0;
    min-height: 80px;
}

#contact-form .row .label {
    width: 30%;
    float: left;
    padding-top: 20px;
}

#contact-form .row .field {
    width: 70%;
    float: left;
}

#contact-form span.red {
    color: #812d08;
}

#contact-form textarea {
    resize: none !important;
    max-height: 50px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form method="post" name="contact-form" id="contact-form" data-ajax="false"> 
    <div class="row">
        <div class="label">
            <label for="name">Name: <span class="red">*</span></label>
        </div>
        <div class="field">
            <input type="text" name="name" id="name" placeholder="John Doe" />
        </div>
    </div> 
    <div class="row">
        <div class="label">
            <label for="email">E-mail: <span class="red">*</span></label>
        </div>
        <div class="field">
            <input type="text" name="email" id="email" placeholder="email@servermail.com" />
        </div>
    </div> 
    <div class="row">
        <div class="label">
            <label for="subject">Subject: <span class="red">*</span></label>
        </div>
        <div class="field">
            <input type="text" name="subject" id="subject" placeholder="Subject" />
        </div>
    </div> 
    <div class="row">
        <div class="label">
            <label for="message">Message: <span class="red">*</span></label>
        </div>
        <div class="field">
            <textarea name="message" id="message" placeholder="Message" ></textarea>
        </div>
    </div> 
    <div class="row">
        <p><span class="red">*</span> Required Fields</p>
        <input data-theme="b" class="submit" type="submit" value="Submit">
    </div> 
</form>

Solution

Calling

$(form).submit(function() {
   //
});

inside your submitHandler is incorrect: you are just adding the supplied function as an event handler for the form, but not actually calling it. So the first time you press the button, you are only defining a new event handler. The second press works because now that handler has been defined.

To fix, just remove the

$(form).submit(function() {

and corresponding

});

lines, putting your submit code directly in the submitHandler instead.

submitHandler: function(form) {
    var str = $(this).serialize();

    $.ajax({
        url: 'process.mail.jsp',
        type : 'POST',
        data: str,
        //dataType : 'json',
        success: function(result) {
            // etc
        }
    });
}

Working example here – it's literally just yours with lines 37 and 57 commented out.