表单验证，如果表单为空则阻止post请求

Question

问题描述

一个表单验证的问题，表单未填写完整，js已经提醒必须填写，但是按提交按钮仍然能把表单的内容给submit

相关代码

 $.ajax(
                {
                    type:".........",
                    url:".......",
                    dataType:"...........",
                    beforeSend:"........",
                    success:"..........",
                    error:"...........",
                    complete:"........",
                });

问题出现的环境背景及自己尝试过哪些方法

哪怕表单为空，也会直接把表单内容提交到服务器了

IF(...........)
{
$.ajax（..........）
}

你期待的结果是什么？实际看到的错误信息又是什么？

如果表单为空，则不发送ajax请求

Answer 1

你的IF是错误的写法，IF不能是大写，必须是小写，是不是因为这个原因，造成验证处理根本就没有执行？

Answer 2

你这是纯js吗?执行你的$.ajax（）方法前，判断如果具体的input项，如果有为空的，你就alert或者其他提示，不执行代码不就好了吗？

Answer 3

1. 必填项，用 required 属性标记，比如 <input name="username" required>
2. 侦听表单 submit 事件，在事件处理函数里调用 $.ajax

3. 发送请求前，检查表单是否填完，既然用 jQuery，那就是：

   $('form').on('submit', function (event) {
     event.preventDefault();
     if (event.target.matches(':invalid')) {
       return;
     }
   
     $.ajax(....);
   });

4. if 小写，JS 大小写敏感，你写错了，函数就出错，按照 html 逻辑就会正常提交表单