提交前检查数据

I have dropdown, textarea, and numeric text box. I want to check that all my fields are not blank before submitting the form, as currently it will send this blank data into my database. Below, I have also added the code that I tried

For your information, I am using AJAX for my submit button.

<div id="wnd">
  <div id="popup-form">
    <div class="k-edit-label">
      <label for="recipeType">Recipe Type</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="recipeType" name="recipeType" data-bind="value: recipeTypeID"
        required /></div>
    <br>
    <div class="k-edit-label">
      <label for="recipeMeasurement">Recipe Measurement</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="measurementID" name="recipeMeasurement"
        style="width:65%; margin: 8px 0px 5px 0px;" data-bind="value: measurementID" /></div>
    <br>
    <div class="k-edit-label">
      <label for="defaultBarcode">Default Barcode</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="defaultBarcode" type="text" class="k-input k-textbox"
        data-role="defaultBarcode" data-bind="value: defaultBarcode" /></div>
    <br>
    <div class="k-edit-label">
      <label for="retailDefault">Retail Selling Price</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="retailDefault" data-role="numerictextbox"
        data-bind="value: retailDefaultSellingPrice" /></div>
    <br>
    <button class="k-button" id="btnSave" value="submit" style="float:right; padding: 5px 20px; border-radius: 4px;"
      onclick="submitData()">Submit</button>
  </div>
</div>

JavaScript

var wnd = $("#wnd").kendoWindow({
  title: "Recipe",
  height: 250,
  width: 400,
  visible: false
}).data("kendoWindow");

$("#recipeType").kendoDropDownList({
  optionLabel: "Select recipe type",
  dataTextField: "posRecipeType",
  dataValueField: "posRecipeTypeID",
  dataSource: {
    transport: {
      read: {
        url: "./getTest.php",
        type: "POST",
        data: function () {
          return {
            method: "getRecipeType",
          }
        }
      }
    }
  }
});

$("#measurementID").kendoDropDownList({
  optionLabel: "Select recipe measurement",
  dataTextField: "measurementName",
  dataValueField: "measurementID",
  dataSource: {
    transport: {
      read: {
        url: "./getTest.php",
        type: "POST",
        data: function () {
          return {
            method: "getRecipeMeasurement",
          }
        }
      }
    }
  }
});

$("#retailDefault").kendoNumericTextBox({
  decimals: 2,
  min: 0
});

AJAX for button:

//BUTTON SUBMIT
function submitData() { 
var wnd = $("#wnd").data("kendoWindow");

var recipeType = $("#recipeType").data("kendoDropDownList").value();
var measurementID = $("#measurementID").data("kendoDropDownList").value();
var defaultBarcode = document.getElementById("defaultBarcode").value;
var retailDefault = $("#retailDefault").data("kendoNumericTextBox").value();

   /* if(recipeType == ""){
        KendoAlert("Select recipe type");
}else if (measurementID == ""){
    KendoAlert("Select recipe measurement");
  }else if (defaultBarcode == ""){
    KendoAlert("Fill in default barcode");
    }else if (retailPrice == ""){
      KendoAlert("Fill in price");
    }
    else {*/
        $.ajax({
        url: "./getTest.php",
        type: "POST",
        data: {
          method: "addRecipe",
          add1: recipeType,
          add2: measurementID,
          add3: defaultBarcode,
          add4: retailDefault,
          },
      });

  //    }
    wnd.close(); //window popup close
}

Simple way you can add required attribute for mandatory field and add <form>. Wrap your form inside <form> tag.

If you open suggest using jquery, the form can be like this.

$('#formInput').on('submit', function() {
  //send ajax data
  let data = {
    "recipeType": $('#recipeType').val(),
    "measurementID": $('#measurementID').val(),
    "defaultBarcode": $('#defaultBarcode').val(),
    "retailDefault": $('#retailDefault').val(),
  };
  
  alert('sucessfully saved, data: '+ JSON.stringify(data));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="form-horizontal" method="" enctype="multipart/form-data" id="formInput">
  <div id="popup-form">
    <div class="k-edit-label">
      <label for="recipeType">Recipe Type</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="recipeType" name="recipeType" data-bind="value: recipeTypeID" required /></div>
    <br>
    <div class="k-edit-label">
      <label for="recipeMeasurement">Recipe Measurement</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="measurementID" name="recipeMeasurement" style="width:65%; margin: 8px 0px 5px 0px;" data-bind="value: measurementID" required /></div>
    <br>
    <div class="k-edit-label">
      <label for="defaultBarcode">Default Barcode</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="defaultBarcode" type="text" class="k-input k-textbox" data-role="defaultBarcode" data-bind="value: defaultBarcode" required /></div>
    <br>
    <div class="k-edit-label">
      <label for="retailDefault">Retail Selling Price</label>
    </div>
    <div>
      <input style="width:60%; margin-left: 10px;" id="retailDefault" data-role="numerictextbox" data-bind="value: retailDefaultSellingPrice" required /></div>
    <br>
    <button class="k-button" id="btnSave" type="submit" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>
  </div>

</form>

</div>