jQuery表单验证功能失效，修改JS代码后无法正常提交如何修复

• 事件绑定失效：JS监听的是id="submit"元素的点击事件，但HTML提交按钮只有class="submit"，没有对应id，触发逻辑根本没执行
• 变量误用：phone是通过val()提前拿到的字符串值，后续判断phone.value === ""属于无效逻辑，字符串不存在value属性，手机号为空的判断永远不触发
• 校验逻辑不一致：邮箱为空/格式错误时直接return false，没有给邮箱输入框添加错误样式，也没有和其他字段一样通过ans变量统一控制流程
• 按钮属性错误：提交按钮的type写为text，属于文本输入框类型，不符合按钮的语义要求
• 跳转地址错误：校验通过后跳转的www.google.com缺少https://协议头，浏览器会识别为站内相对路径，跳转失败

$(function(){
    // 修改选择器绑定提交按钮，也可直接给按钮加id="submit"更稳妥
    $(".submit").click(function(){
        var first_name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var ans = true;
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");

        if(first_name === ""){
            window.alert("لا يمكنك ترك خانةالاسم فارغة");
            $("#first_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#first_name").removeClass("WrongInp");
        }

        if(last_name === ""){
            window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
            $("#last_name").addClass("WrongInp");
            ans = false;
        }else{
            $("#last_name").removeClass("WrongInp");
        }

        // 去掉错误的.value调用，直接判断字符串本身
        if(phone === ""){
            window.alert("لا يمكنك ترك خانةالهاتف فارغة");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }

        if(phone.length < 9 || phone.length > 14){
            window.alert("ادخل رقم هاتف صحيح");
            $("#phone").addClass("WrongInp");
            ans = false;
        }else{
            $("#phone").removeClass("WrongInp");
        }

        // 统一邮箱校验逻辑，通过ans控制流程，同步添加错误样式
        if (email === '') {
            alert('الرجاء ادخال البريد الالكتروني');
            $("#email").addClass("WrongInp");
            ans = false;
        }else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
            alert("البريد الالكتروني غير صحيح");
            $("#email").addClass("WrongInp");
            ans = false;
        }else{
            $("#email").removeClass("WrongInp");
        }

        if(ans === true){   
            var form = new FormData();
            form.append("first_name", first_name);
            form.append("last_name", last_name);
            form.append("phone", phone);
            form.append("email", email);
            form.append("status", "new");
        
            var settings = {
              "url": "你的接口地址",
              "method": "POST",
              "timeout": 0,
              "headers": {
                "Authorization": "你的鉴权信息"
              },
              "processData": false,
              "contentType": false,
              "data": form
            };
        
            $.ajax(settings).done(function (response) {
                // 补全跳转地址的协议头
                window.location.href = "https://www.google.com";
            });
        }
        return false;
    });
});

同步修改HTML按钮属性：

<button type="button" class="submit">submit</button>

可以直接复用HTML5自带的表单校验能力，减少重复逻辑，后续修改规则只需要调整HTML属性即可：

$(function(){
    // 监听表单提交事件，比单独监听按钮点击更稳妥
    $("#myForm").on("submit", function(e){
        e.preventDefault();
        const form = this;
        let isValid = true;
        // 遍历所有需要校验的输入框
        $(form).find('input[required]').each(function(){
            const $input = $(this);
            // 直接调用HTML5原生校验方法，自动匹配minlength、pattern等配置的规则
            if(!this.checkValidity()){
                isValid = false;
                $input.addClass("WrongInp");
                // 根据字段返回对应提示
                switch(this.id){
                    case "first_name":
                        alert("لا يمكنك ترك خانةالاسم فارغة");
                        break;
                    case "phone":
                        alert(this.value === "" ? "لا يمكنك ترك خانةالهاتف فارغة" : "ادخل رقم هاتف صحيح");
                        break;
                    case "email":
                        alert(this.value === "" ? "الرجاء ادخال البريد الالكتروني" : "البريد الالكتروني غير صحيح");
                        break;
                }
                // 第一个错误就终止遍历，避免连续弹出提示
                return false;
            }
            $input.removeClass("WrongInp");
        })

        if(isValid){
            const formData = new FormData(form);
            formData.append("status", "new");
            $.ajax({
                url: "你的接口地址",
                method: "POST",
                headers: {
                    "Authorization": "你的鉴权信息"
                },
                processData: false,
                contentType: false,
                data: formData
            }).done(function(){
                window.location.href = "https://www.google.com";
            })
        }
    })
})

内容的提问来源于stack exchange，提问作者George Kass