Prevent form submit when Input fields are empty in ASP.Net MVC using jQuery

Hello,

how do I create a function that will alert the user if they have left a field empty, when they click submit button?

I tried using preventDefault() and a condition to check each field but no luck.

Here's my html:

@model RegGift_Mvc.Models.RegisterGifts
@{
    ViewBag.Title = "Create"; 
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.href;
        if (url.includes('?'))    //includes() method determines whether a string contains specified string.
        {
            //params found            
            $("#file_ref").hide();
            $("#txtFileRef").show();
        }
        else {
            $("#txtFileRef").hide();
        }
    });

    function selected() {
         $("#file_ref").empty();
         $.ajax({
             url: '@Url.Action("GetMatterRef","Gift")',
             type: 'POST',
             data: { param: $('#fee_earner').val() },
             dataType: "json",
             success: function (Matter) {
                 $.each(Matter, function () {
                     $("#file_ref").append($("<option />").val(this.value).text(this.text));
                 });
                 $("#file_ref").select2();

             },
             error: function () {
                 //alert("No Fee Earner selected");

             }
         });
    }
</script>

But not sure how to do this correctly with the existing code.

var beneficiary = $('#beneficiary').val();
var personmakinggift = $('#personmakinggift').val();
var fee_earner = = $('#fee_earner ').val();
var file_ref = $('#file_ref').val();
var received_or_given =  $('#received_or_given').val();
var date_received =   $('#date_received').val();
var estimated_value = $('#estimated_value').val();
var description_of_gift = $('#description_of_gift').val();
var comments = $('#comments').val();
if (beneficiary && personmakinggift && fee_earner && file_ref && received_or_given && date_received && date_received && estimated_value && description_of_gift && comments)
{
     //post the form
}
else
  alert('please fill out all fields')