Php 如何以多种形式进行验证，使其在没有任何输入值的情况下永远不会跳过或提交？

当我没有在我的表格中填写任何字段并提交它时，它是在没有任何数据的情况下提交的，即使我按照要求标记了所有输入字段，它也没有要求填写字段。你能帮我解决这个问题吗？我使用HTML、CSS和javascript作为前端，PHP作为后端

const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = [...document.querySelectorAll(".step p")];
const progressCheck = [...document.querySelectorAll(".step .check")];
const bullet = [...document.querySelectorAll(".step .bullet")];
let max = 4;
let current = 1;

nextBtnFirst.addEventListener("click", function() {
  slidePage.style.marginLeft = "-25%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnSec.addEventListener("click", function() {
  slidePage.style.marginLeft = "-50%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnThird.addEventListener("click", function() {
  slidePage.style.marginLeft = "-75%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
submitBtn.addEventListener("click", function() {
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
  setTimeout(function() {
    alert("Your Form Successfully Signed up");
    location.reload();
  }, 800);
});

prevBtnSec.addEventListener("click", function() {
  slidePage.style.marginLeft = "0%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnThird.addEventListener("click", function() {
  slidePage.style.marginLeft = "-25%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnFourth.addEventListener("click", function() {
  slidePage.style.marginLeft = "-50%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});

@导入url（'https://fonts.googleapis.com/css?family=Poppins:400，500600700&display=swap'）；
* {
保证金：0；
填充：0；
大纲：无；
字体系列：“Poppins”，无衬线；
}
身体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
溢出：隐藏；
背景：url（“bg.png”），-webkit线性渐变（底部，#0c27c2，#8BF6D）；
}
：：选择{
颜色：#fff；
背景：#2eff1c；
}
.集装箱{
宽度：330px；
背景：#fff；
文本对齐：居中；
边界半径：5px；
填充：50px 35px 10px 35px；
}
.货柜头{
字体大小：35px；
字号：600；
利润率：0.30px0；
}
.容器.表格外部{
宽度：100%；
溢出：隐藏；
}
.容器.形状外部形状{
显示器：flex；
宽度：400%；
}
.表格外部表格.第页{
宽度：25%；
过渡：留有0.3s的裕度；
}
.表格外部表格.页面.标题{
文本对齐：左对齐；
字体大小：25px；
字号：500；
}
.表单外部表单.页面.字段{
宽度：330px；
高度：45px；
利润率：45px0；
显示器：flex；
位置：相对位置；
}
表单.页面.字段.标签{
位置：绝对位置；
顶部：-30px；
字号：500；
}
表单.页面.字段输入{
身高：100%；
宽度：100%；
边框：1px纯色浅灰色；
边界半径：5px；
左侧填充：15px；
字号：18px；
}
表单.页面.字段选择{
宽度：100%；
左侧填充：10px；
字号：17px；
字号：500；
}
表单.页面.字段按钮{
宽度：100%；
高度：计算（100%+5px）；
边界：无；
背景：#128dff；
利润上限：-20px；
边界半径：5px；
颜色：#fff；
光标：指针；
字号：18px；
字号：500；
字母间距：1px；
文本转换：大写；
过渡：0.5s缓解；
}
表单.页面.字段按钮：悬停{
背景：#000；
}
表单.页面.btns按钮{
利润顶部：-20px！重要；
}
form.page.btns button.prev{
右边距：3倍；
字号：17px；
}
form.page.btns button.next{
左边距：3倍；
}
.容器.进度条{
显示器：flex；
利润率：40px0；
用户选择：无；
}
.容器.进度条.步骤{
文本对齐：居中；
宽度：100%；
位置：相对位置；
}
.容器.进度条.步骤p{
字号：500；
字号：18px；
颜色：#000；
边缘底部：8px；
}
.进度条.步骤.项目符号{
高度：25px；
宽度：25px；
边框：2倍实心#000；
显示：内联块；
边界半径：50%；
位置：相对位置；
过渡：0.2s；
字号：500；
字号：17px；
线高：25px；
}
.进度条.步骤.项目符号.活动{
边框颜色：#00a745；
背景：#67ff21；
}
.进度条.步骤.项目符号范围{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}
.进度条.步骤.项目符号.活动范围{
显示：无；
}
.进度条.步骤.项目符号：在，
.进度条.步骤.项目符号：之后{
位置：绝对位置；
内容：''；
底部：11px；
右：-51px；
高度：3倍；
宽度：44px；
背景：#262626；
}
.进度条.步骤.项目符号.活动：之后{
背景：#67ff21；
变换：scaleX（0）；
变换原点：左；
动画：设置0.3s线性向前的动画；
}
@关键帧设置动画{
100% {
变换：scaleX（1）；
}
}
.进度条.步骤：最后一个子项.项目符号：之前，
.进度条.步骤：最后一个子项.项目符号：之后{
显示：无；
}
.进度条.步骤p.激活{
颜色：#1257d6；
过渡：0.2s线性；
}
.进度条.步骤.检查{
位置：绝对位置；
左：50%；
最高：70%；
字体大小：15px；
转换：翻译（-50%，-50%）；
显示：无；
}
.进度条.步骤.检查.活动{
显示：块；
颜色：#fff；
}
/*=============媒体规则======================*/
/*在992px宽或更小的屏幕上*/
@媒体屏幕和（最大宽度：992px）{}
/*在600px或更小宽度的屏幕上*/
/*@媒体屏幕和（最大宽度：600px）{
.集装箱{
宽度：550px；
背景：#fff；
文本对齐：居中；
边界半径：5px；
填充：50px 35px 10px 35px；
}
} */

Small Note请记住，我可以从我的浏览器中禁用Javascript，你在JS中所做的任何事情我都可以浏览和伪造。验证的唯一安全位置是服务器上