Question

尝试使用javascript在php页面上设置表单验证。

我的javascript：

<script type="text/javascript">

    function validate(){
        var name = document.getElementById("fullName").value;
        var email = document.getElementById("email").value;
        var production = document.getElementById("production").value;
        var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

        if(name == "" || email == "" || production == "null"){
            alert("All fields are required!");
            return false;
        }
        else if(!(email).match(emailReg){
            alert("Please enter a valid email address!");
            return false;
        }
        else{
            document.getElementById("firstForm").submit;
        }
    }

</script>

我的PHP代码格式：

echo    '<form action="bookingCont.php" id="firstForm" method="GET" class="booking">
            <p class="formLine">Full Name:&nbsp<input type="text" id="fullName" name="fullName"></p>
            <p class="formLine">Email:&nbsp<input type="text" id="email" name="email"></p>';            

    echo    '<p class="formLine">Production: <select id="production" name="production">';
    echo                                    '</select></p>
            <p class="formLine"><input type="submit" value="Show Me Dates!" onclick="validate()"></p>
            </form>';

有一些不重要的代码，我填写了我在这里省略的选项。我遇到的问题是，当我点击提交时，我希望页面运行此validate（）函数并在验证失败时显示错误消息并提交表单并在验证成功时转到下一页。在当前没有发生的设置下：/该功能似乎根本没有被调用，它只是移动到下一页......

Answer 1

这里有3个解决方案。

如果您已使用jQuery，请转到提交侦听器中的e.preventDefault()。
在表单元素中添加onsubmit="validate();"属性，然后从按钮中删除onclick。如果返回true，则会提交。
将type="submit"更改为type="button"。使用其他类型，提交它的唯一方法是使用javascript。

希望你找到最合适的人。

Answer 2

知道您使用了“提交”类型的输入，我只会执行以下操作：

$( "#firstForm" ).submit(function( event ) {
    event.preventDefault(); // prevent form submission
    var name = document.getElementById("fullName").value;
    var email = document.getElementById("email").value;
    var production = document.getElementById("production").value;
    var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

    if(name == "" || email == "" || production == "null"){
        alert("All fields are required!");
        return false; // prevent form submission
    }
    else if(!(email).match(emailReg){
        alert("Please enter a valid email address!");
        return false; // prevent form submission
    }
    else{
        return true; // good to go!
    }
});

Answer 3

我发现这篇文章解释了另一种方法： Form submit to run javascript and then post to php script

<form class="form" name="form" action="processing.php" method="post" onsubmit="return validate();">

基本上在表单中添加一个onsubmit标记。如果validate（）返回true，它将发送表单

编辑：在您的函数validate（）中，您应该进行错误处理（例如，在页面上显示＆＃34;错误框＆＃34;内部错误

EDIT2：您的javascript应该更改为

function validate(){
    var name = document.getElementById("fullName").value;
    var email = document.getElementById("email").value;
    var production = document.getElementById("production").value;
    var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;

    if(name == "" || email == "" || production == "null"){
        alert("All fields are required!");
        return false;
    }
    else if(!(email).match(emailReg)){
        alert("Please enter a valid email address!");
        return false;
    } else {
        return true;
    }
}

然后您的表单应如下所示：

<form name="form" action="processing.php" method="post" onsubmit="return validate();">
    <!-- Put your input tags here with the correct ids -->
    <input type="submit" value="submit" />
</form>

我希望这能让事情变得清晰

如果成功，javascript表单验证onclick转到下一页

3 个答案: