如何提交表单并在表单验证后重定向到页面

How to submit a form and redirect to a page after form validation

本文关键字：表单 验证 重定向 何提交 提交      更新时间：2023-09-26

在满足表单验证功能后，如何提交表单？我需要它重定向到我的主页。我完全被难住了。是否可以使用<input type="button">而不是<input type="submit">来提交表单？如果没有，我如何使用提交按钮在提交之前首先运行表单验证功能？

我的HTML:

<form name="registerform" ID="registerform">
        <div ID="Namebox">
            <p>Name</p>
            <input type="text" id="name" name="name" />
            <br />
        </div>
        <br />
        <div ID="emailbox">
            <p>Email</p>
            <input type="text" id="email" name="email" size="30"/>
            <br />
        </div>
        <br />
        <div ID="passwordbox">  
            <p>Password</p> 
            <input type="password" ID="password"/>
            <br />
        </div>
        <br />
        <div ID="confirmpasswordbox">   
            <p>Confirm Password</p> 
            <input type="password" ID="confirmpassword" onkeyup="passwordvalidator()"/>&nbsp <span id="doesnotmatch"></span>
            <br />
        </div>
        <br />
        <div ID="citystatebox">
            <p>City, State</p> 
            <input type="text" id="citystate"name="citystate"/>
            <br />
        </div>
            <br />
            <br />
            On-Snow Disciplines
            <br />
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Downhill Skiing"/> Downhill Skiing
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Downhill Snowboarding"/> Downhill Snowboarding
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Cross-Country Skiing"/> Cross-Country Skiing
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Backcountry Skiing"/> Backcountry Skiing
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Backcountry Snowboarding/Splitboarding"/> Backcountry Splitboarding
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Park Skiing"/> Park Skiing
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Park Riding"/> Park Riding
            <br />
            &nbsp <input type="checkbox" name="onsnowdisciplines" value="Ski Mountaineering"/> Ski Mountaineering
            </p>
            <br />
            <br />
         <input type="button" id="registerSubmitButton" onclick="regSubBut()" value="Send It">&nbsp&nbsp&nbsp<span id="errorInformer" style="color:red;"></span>    
        </form>

我的JS:

function regSubBut() {
var error = document.getElementById("errorInformer");
var email = document.getElementById("email");
var emailFilter = /^([a-zA-Z0-9_'.'-])+'@(([a-zA-Z0-9'-])+'.)+([a-zA-Z0-9]{2,4})+$/;
if (document.getElementById("name").value === "")
{
    error.innerHTML = "Please enter a name";
    document.getElementById("name").focus();
    return false;
}
else if (email === "" || !emailFilter.test(email.value))
{
    error.innerHTML = "Please enter a valid email";
    email.focus();
    return false;
}
else if (document.getElementById("password").value === "" || document.getElementById("confirmpassword").value === "")
{   
    error.innerHTML = "Please enter a password";
    document.getElementById("password").focus();
    return false;
}
else if (document.getElementById("citystate").value === "")
{
    error.innerHTML = "Please enter a city and state";
    document.getElementById("citystate").focus();
    return false;
}
else {
    return true;
    var frm = document.getElementById("registerform");
    frm.action = "Homepage.html"; 
    frm.submit();
    document.getElementById("welcomebutton").style.display = "block";
}
}

当没有验证错误时，我发现您的代码有问题：

else {
    return true;//below line won't execute, move it to the bottom
    var frm = document.getElementById("registerform");
    frm.action = "Homepage.html"; 
    frm.submit();
    document.getElementById("welcomebutton").style.display = "block";
}

您可以使用表单标签的onsubmit属性：

var valid = function() {
  return false;
};
<form onsubmit="return valid();">
  Won't submit ...
  <input type="submit" />
</form>

您也可以使用输入标签的onclick属性：

var valid = function() {
  return false;
};
<form>
  Won't submit either ...
  <input type="submit" onclick="return valid();" />
</form>

$('form')[0].checkValidity()

如果执行上面的操作，假设您在这个页面上只有表单元素，这将执行验证(HTML5验证(，并且您不需要使用默认提交。

相关文章：