Railsのajaxを制御したい

ボタンをクリックしたらjqueryでモーダルウィンドウでフォームを表示させ、submitボタンをクリックした時にajax（js.erb）でバリデーションの結果を表示させる機能を作成していますが、
そのモーダルウィンドウを非表示にする×ボタンをクリックすると、エラーメッセージが表示されてしまいます。

submitボタンをクリックした時にだけajaxが作動するようにしたいのですが、そのような方法はあるでしょうか？

コードは以下の通りです。

html
1// show.html.erb
2<%= form_with url: tests_create_path, id:'create_form' do |f| %>
3    <button class="close close-modal">
4        <%= icon('fas', 'times' ) %>
5    </button>
6    <%= f.text_field :name, id:'text_field' %>
7    <div id="message">
8    </div>
9    <div class="actions">
10        <%= f.submit "登録" , id:'create_button' %>
11    </div>
12<% end %>

js
1// modal_window.js
2
3$(function() {                                                                                                                                  
4  $(document).on('turbolinks:load', function() {                                                                                                
5    // モーダルウィンドウ表示                                                                                                                                 
6    $(document).on('click', '.create-test-btn', function(e){                                                                                                                   
7      $('.container').fadeIn();                                                                                                
8    });                                                                                                                                     
9    // モーダルウィンドウ非表示                                                                                                                                        
10    $('.close-modal').on('click',function(){                                                                                                                                                                                          
11      $('.container').fadeOut();                                                                                                
12    });                                                                                                                                 
13                                                                                                                                          
14    $('.overlay').on('click',function(){                                                                                                                                                                                            
15      $('.container').fadeOut();                                                                                                
16    });                                                                                                
17  });                                                                                                
18});

js
1// create.js.erb
2// エラーメッセージを呼び出す
3$(function(){                                                         
4    document.body.addEventListener('ajax:success', function(event) {                                    
5      // ajax done                                    
6      <% if @test.errors.any? %>                                    
7        $("#message").html("<p><%= j(render partial: 'error_message', locals: {model: @project_object}) %></p>")                                    
8      <% else %>                                    
9        $("#message").html("<p><%= j(render partial: 'flash_message', locals: {model: @project_object}) %></p>")                                                                   
10      <% end %>                                    
11    });                                    
12                                      
13    document.body.addEventListener('ajax:error', function(event) {                                    
14      // ajax fail                                    
15      alert("エラー");                                    
16    });                                    
17                                      
18    document.body.addEventListener('ajax:complete', function(event) {                                    
19      // ajax always                                    
20    });                                                                                                                                                                                                                    
21});

html
1// _error_message.html.erb
2<% if model.errors.any? %>
3  <div id="validation-errors">
4    <p><%= model.errors.count %>件のエラーがあります。</p>
5    <ul class="error-messages">
6      <% model.errors.full_messages.each do |message| %>
7        <li class="error-message"><%= message %></li>
8      <% end %>
9    </ul>
10  </div>
11<% end %>