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

Question

满足表单验证功能后如何提交表单？我需要它重定向到我的主页。我完全被难住了。是否可以使用<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";
}
}

Answer 1

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

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";
}

可以使用form标签的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>

Answer 2

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

如果假设您在此页面上只有表单元素执行上述操作，这将执行验证（HTML 5 验证）并且您不需要使用默认提交。