如何在不执行表单操作的情况下退出 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 name

fname = document.getElementById("fname").value;

try{...

它会阻止你的表单采取行动。然后，您只需要处理函数内的重定向即可。

Answer 2

将输入类型更改为按钮，因为您具有如下所示的onclick功能

断续器

<button id="submit" onclick="validate(event)">Submit</button>

断续器

添加了事件.prevent默认（）

function validate(event){

     event.preventDefault();

    // Required first name

    fname = document.getElementById("fname").value;

    try{

        if (fname == "") throw "You have not given your first name.";

    }

    catch(err) {

    alert(err);

    console.error(err);

    }

    // valid date format

    bdate = document.getElementById("bdate").value;

    var contains = bdate.indexOf("/");

    var day = bdate.slice(0, 2);

    var month = bdate.slice(3); 

    try{

        if (contains != 2 && bdate !== "") throw "The date must be in the following format 'dd/mm' to be valid.";

        if (isNaN(day) || isNaN(month) && bdate !== "") throw "The date must contain numbers.";

        if (day > 31 && bdate !== "") throw "You seem to have done a typo with your birth day.";

        if (month > 12 && bdate !== "") throw "You seem to have done a typo with your birth month.";

    }

    catch(err) {

        alert(err);

        console.error(err);

    }

    // Valid email address

    email = document.getElementById("email").value;

    var searchAt = email.indexOf("@");

    var searchDot = email.indexOf(".");

    try{

        if (email == "") throw "You have not given your email.";

        if (searchAt == -1) throw "Your email must contain an '@' symbol.";

        if (searchDot == -1) throw "Your email must contain a . ";

    }

    catch(err){

        alert(err);

        console.error(err);

    }

    };