Wordpress and Ajax feed

I am completely lost here. Can anyone check what is happening with the form I am trying to create here? It should send data using Ajax in a custom WP theme without any stories to the DB.

The console gives me an error that "name is not defined", line 67 jQuery - data:{name:firstname, email:email, message:comment,action:'validate_form'}

but actually I believe it will be more.

<form class="form">
      <div class="form__item form__item_no-margin">
        <input type="text" name="firstname" placeholder="What your name?*" class="firstname" required>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <input type="text" name="email" placeholder="What your email address?*" class="email" required>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <textarea name="comment" placeholder="Please, leave a message!*" class="textarea" required></textarea>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <input type="button" name="submit" value="Send" class="submit-btn">
        <p class="error-message error-message_main val-error">All the required fields have to be filled out.</p>
        <p class="success-message val-success">Thanks. I'll contact you ASAP!</p>
      </div>
    </form>

      

        
        
        
      

    

And some jQuery:

 jQuery(document).ready(function(){
  jQuery(".submit-btn").click(function(e){
  e.preventDefault();
  var name = jQuery(".firstname").val();
  var email = jQuery(".email").val();
  var message = jQuery(".textarea").val();
  var ajaxUrl = "/wp-admin/admin-ajax.php";

if(name === "" || email === "" || message === "") {
  jQuery(".val-error, .error-message").show();
  jQuery("html, body").animate({
    scrollTop: jQuery(".val-error").offset().top
}, 700)
}
else {
  jQuery.ajax({
    url: ajaxUrl, 
    method:"POST",
    data:{name:firstname, email:email, message:comment,action:'validate_form'},
    success: function(data) {
      jQuery("form").trigger("reset");
      jQuery(".val-success").show(fast);
        }
      });
    }
  });
});

      

        
        
        
      

    

PHP in functions.php file:

add_action('wp_ajax_myaction', 'my_action_callback');
add_action('wp_ajax_nopriv_myaction', 'my_action_callback');


function my_action_callback(){
 $name= trim($_POST["firstname"]);
 $email = trim($_POST["email"]);
 $comment = trim($_POST["comment"]);

 $page_title = "New form submission";
 $message = "Name: $name \nEmail: $email \nMessage: $comment";
 mail('some@email.com', $page_title, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: some@email.com" );
wp_die();

      

        
        
        
      

    

}

UPDATE

Attached is the latest version in codefen. PHP at the bottom.

https://codepen.io/anon/pen/RVWaJY

add_action('wp_ajax_myaction', 'validate_form_callback');
add_action('wp_ajax_nopriv_myaction', 'validate_form_callback');


function validate_form_callback(){
$name= trim($_POST["firstname"]);
$email = trim($_POST["email"]);
$comment = trim($_POST["comment"]);

$page_title = "New form submission";
$message = "Name: $name \nEmail: $email \nMessage: $comment";
mail('some@email.com', $page_title, $message, "Content-type: 
text/plain; charset=\"utf-8\"\n From: some@email.com" );
wp_die();

      

        
        
        
      

    

}