移动浏览器上的 onsubmit() 表单

Question

我目前在表单的 onsubmit() 事件上使用 javascript 函数来检查所有输入是否不为空。

这在电脑上可以正常工作，但在手机上，它会改变背景颜色（就像我想在输入为空时做的那样）但它仍然提交表单！！！

我的表格：

<form id="formContact" action="envoi-message.php" method="post" class="normal" onsubmit="return valideChamps();">
            <div class="ddl">
                <span>VOUS ÊTES...</span>
                <div class="ddlOption">
                    <ul>
                        <li onclick="ddlContact('entreprise')"><span>UNE ENTREPRISE</span></li>
                        <li onclick="ddlContact('ecole')"><span>UNE &Eacute;COLE</span></li>
                        <li onclick="ddlContact('personne')"><span>UNE PERSONNE</span></li>
                    </ul>
                </div>
            </div>
            <input class="cache" type="text" name="entreprise" placeholder="NOM DE L'ENTREPRISE" />
            <input class="cache" type="text" name="ecole" placeholder="NOM DE L'&Eacute;COLE" />
            <input type="text" name="nom" placeholder="VOTRE NOM" />
            <input type="email" name="email" placeholder="VOTRE EMAIL" />
            <textarea name="message" placeholder="VOTRE MESSAGE" ></textarea>
            <input id="btnEnvoi" type="submit" value="Envoyer">
        </form>

我的功能：

    function valideChamps(){
    var bResult = true;
    if ($("input[name*='nom']").val() == "") {
        $("input[name*='nom']").addClass("error");
        bResult = false;
    } else {
        $("input[name*='nom']").removeClass("error");
    }
    if ($("input[name*='email']").val() == "") {
        $("input[name*='email']").addClass("error");
        bResult = false;
    } else {
        var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (regex.test($("input[name*='email']").val()) == false ) {
            $("input[name*='email']").addClass("error");
            bResult = false;
        } else {
            $("input[name*='email']").removeClass("error");
        }
    }                                      
    if ($("#formContact textarea").val() == ""){
        $("#formContact textarea").addClass("error");
        bResult = false;
    }else {
        $("#formContact textarea").removeClass("error");
    }
    if ($("div.ddl > span").text().contains("entreprise")){
        if ($("input[name*='entreprise']").val() == "") {
            $("input[name*='entreprise']").addClass("error");
            bResult = false;
        }else {
            $("input[name*='entreprise']").removeClass("error");
        }
    } else if ($("div.ddl > span").text().contains("école")){
        if ($("input[name*='ecole']").val() == "") {
            $("input[name*='ecole']").addClass("error");
            bResult = false;
        }else {
            $("input[name*='ecole']").removeClass("error");
        }
    }
    return bResult;
}

你知道什么是错的......？ 最好的祝福 奥黛丽

编辑：我更改了提交按钮；如果 bResut == true ，我会使用 onclick 提交表单

Answer 1

尝试使用 JS 将您的提交处理程序注册到表单，这样您就可以访问事件并调用 preventDefault() 而不是（或除此之外）返回 false； 像这样：

document.getElementById('formContact').onsubmit = function(e) {
  //your validateChamps stuff goes here
if(!bResult) e.preventDefault();
};

Answer 2

编辑：我更改了提交按钮；如果 bResut == true ，我会使用 onclick 提交表单