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

您可以使用表单标记的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验证），并且您不需要使用默认提交。

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

2 个答案: