如何在不执行表单操作的情况下退出 javascript 表单验证？

Question

我的表单需要使用js进行验证并警告任何错误，然后返回存在输入值的表单，以便他们可以在重新提交之前修复它。一旦验证通过，它应该重定向到php“谢谢”页面。验证逻辑工作正常，但是在错误警报后，它会过早地重定向到php页面。

我的表单：

<form method = "post" name= "account" action= "validated.php" target="_blank">

            <div>

                <label for="fname"><span class="red">*</span> First Name:</label><br>

                <input type="text" id="fname" name="fname" size="40" required><br>

                <label for="lname">Last Name:</label><br>

                <input type="text" id="lname" name="lname" size="40">

            </div>

            <div>

                <label for="bdate">Birth Date:</label><br>

                <input type="text" id="bdate" name="bdate" placeholder="dd/mm"><br>

                <label for="email"><span class="red">*</span> Email Address:</label><br>

                <input type="email" id="email" name="email" size="40" placeholder="[e-mail]" required>

            </div>

            <div>

                <p id="interests">Product Interests:</p>

                <div class= "pref">

                    <input type="checkbox" class="preferences" name="interests[]" value="donuts">

                    <label for="donuts">Donuts</label>

                </div>

                <div class= "pref">

                    <input type="checkbox" class="preferences" name="interests[]" value="vanilla slice">

                    <label for="vanillaSlice">Vanilla Slice</label>

                </div>                      

                <div class= "pref">

                    <input type="checkbox" class="preferences" name="interests[]" value="randy tarts">                      

                    <label for="randyTarts">Randy Tarts</label>

                </div>

                <div class= "pref">

                    <input type="checkbox" class="preferences" name="interests[]" value="custard tarts">

                    <label for="custardTarts">Custard Tarts</label>

                </div>

  

Answer 1

试试这个：onclick="validate(event)"function validate(e){e.preventDefault();// Required first namefname = document.getElementById("fname").value;try{...它会阻止你的表单采取行动。然后，您只需要处理函数内的重定向即可。

Answer 2

将输入类型更改为按钮，因为您具有如下所示的onclick功能断续器<button id="submit" onclick="validate(event)">Submit</button>断续器添加了事件.prevent默认（）function validate(event){&nbsp; &nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp; // Required first name&nbsp; &nbsp; fname = document.getElementById("fname").value;&nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; if (fname == "") throw "You have not given your first name.";&nbsp; &nbsp; }&nbsp; &nbsp; catch(err) {&nbsp; &nbsp; alert(err);&nbsp; &nbsp; console.error(err);&nbsp; &nbsp; }&nbsp; &nbsp; // valid date format&nbsp; &nbsp; bdate = document.getElementById("bdate").value;&nbsp; &nbsp; var contains = bdate.indexOf("/");&nbsp; &nbsp; var day = bdate.slice(0, 2);&nbsp; &nbsp; var month = bdate.slice(3);&nbsp;&nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; if (contains != 2 && bdate !== "") throw "The date must be in the following format 'dd/mm' to be valid.";&nbsp; &nbsp; &nbsp; &nbsp; if (isNaN(day) || isNaN(month) && bdate !== "") throw "The date must contain numbers.";&nbsp; &nbsp; &nbsp; &nbsp; if (day > 31 && bdate !== "") throw "You seem to have done a typo with your birth day.";&nbsp; &nbsp; &nbsp; &nbsp; if (month > 12 && bdate !== "") throw "You seem to have done a typo with your birth month.";&nbsp; &nbsp; }&nbsp; &nbsp; catch(err) {&nbsp; &nbsp; &nbsp; &nbsp; alert(err);&nbsp; &nbsp; &nbsp; &nbsp; console.error(err);&nbsp; &nbsp; }&nbsp; &nbsp; // Valid email address&nbsp; &nbsp; email = document.getElementById("email").value;&nbsp; &nbsp; var searchAt = email.indexOf("@");&nbsp; &nbsp; var searchDot = email.indexOf(".");&nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; if (email == "") throw "You have not given your email.";&nbsp; &nbsp; &nbsp; &nbsp; if (searchAt == -1) throw "Your email must contain an '@' symbol.";&nbsp; &nbsp; &nbsp; &nbsp; if (searchDot == -1) throw "Your email must contain a . ";&nbsp; &nbsp; }&nbsp; &nbsp; catch(err){&nbsp; &nbsp; &nbsp; &nbsp; alert(err);&nbsp; &nbsp; &nbsp; &nbsp; console.error(err);&nbsp; &nbsp; }&nbsp; &nbsp; };