使用javascript进行html表单验证

我正在尝试使用javascript验证我的html表单。验证工作正常，但仍提交。 也就是说，当点击提交时，会出现一条文字，上面写着“需要名字”，但仍然提交

以下是javascript代码：

function validateForm(form) {
    formValid = true;
    for(i = 0; i < form.length; i++) {
        if(!requiredInput(form[i])) 
            formValid = false;
        }
return formValid;


}

function requiredInput(element) {
    if(!element.value.length) {
        document.getElementById(element.id + 'Error').style.display = "inline-block";
        return false;
    } else {
        document.getElementById(element.id + 'Error').style.display = "none";
       return true;
    }
return;

}

函数验证表单（表单）{
formValid=true；
对于（i=0；i

下面是表单的html代码：

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="return validateForm(this);">
        <h2>Validate you name:</h2>
        <div>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
            <span class="error" id="fnameError">First Name is Required</span>
        </div>
        <div>
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
            <span class="error" id="lnameError">Last Name is Required</span>
        </div>
        <div>
            <hr>
        </div>
        <div>
            <input type="submit" value="Submit" name="submit" >
        </div>

    </form>

验证您的姓名：
名字
名字是必需的
姓
姓是必需的

我不知道为什么它仍然提交。 编辑：我需要调试此代码，而不是全部更改

---

编辑：我不能为此更改html代码，我只调试javascript

您的验证具有正确的结构，但是，如果存在任何javascript错误，“return false”将不会取消表单提交

转到开发人员控制台并手动调用validateForm函数。您可以为表单提供一个ID：

<form id="myform"...

---

您将看到一个JavaScript错误。修复错误，您的表单将被截获。

您的验证具有正确的结构，但是，如果存在任何JavaScript错误，“return false”将不会取消表单提交

转到开发人员控制台并手动调用validateForm函数。您可以为表单提供一个ID：

<form id="myform"...

您将看到一个JavaScript错误。修复错误，您的表单将被拦截。

使用

preventDefault（）

禁用提交

function validateForm(event, form) {
    formValid = true;
    for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i])) {
            formValid = false;
            break;
        }

    }
    if (!formValid) {
        event.preventDefault();
    }
    return formValid;
}

使用

preventDefault（）

禁用提交

function validateForm(event, form) {
    formValid = true;
    for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i])) {
            formValid = false;
            break;
        }

    }
    if (!formValid) {
        event.preventDefault();
    }
    return formValid;
}

---

实际上，你可以用一种简单的方法来做，如下所示

修改您的HTML 我删除onsubmit属性并将表单添加到ID

<form id="dsds" action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get">
<h2>Validate you name:</h2>
<div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
    <span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
    <span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
    <hr>
</div>
<div>
    <input type="submit" value="Submit" name="submit" >
</div>

看看这个例子，

---

实际上，您可以用一种简单的方法来完成，请参见下文

修改您的HTML 我删除onsubmit属性并将表单添加到ID

<form id="dsds" action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get">
<h2>Validate you name:</h2>
<div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
    <span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
    <span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
    <hr>
</div>
<div>
    <input type="submit" value="Submit" name="submit" >
</div>

看看这个例子，

---

我认为您需要验证其类型是否提交：

    function validateForm(form) {

        formValid = true;
        for(i = 0; i < form.length; i++) {
            if(form[i].type != "submit"){
                if(!requiredInput(form[i])){
                    formValid = false;   
                }
            }

        }
        return formValid;

    }

函数验证表单（表单）{
formValid=true；
对于（i=0；i

我认为您需要验证其类型是否提交：

    function validateForm(form) {

        formValid = true;
        for(i = 0; i < form.length; i++) {
            if(form[i].type != "submit"){
                if(!requiredInput(form[i])){
                    formValid = false;   
                }
            }

        }
        return formValid;

    }

函数验证表单（表单）{
formValid=true；
对于（i=0；i

验证您的姓名：
名字
名字是必需的
姓
姓是必需的

函数validateForm（e）{
形式=目标；
formValid=true；
对于（i=0；i

这应该有效

验证您的姓名：
名字
名字是必需的
姓
姓是必需的

函数validateForm（e）{
形式=目标；
formValid=true；
对于（i=0；i

这应该会起作用

函数验证表单（表单）{
formValid=true；
试一试{
对于（i=0；i”，错误）
}
返回表格有效；
}
功能要求输入（元素）{
试一试{
const elementInputError=document.getElementById（element.id+'Error'）；
如果（！element.value.length）{
elementInputError&&setDisplayError（elementInputError，“内联块”）；
返回false；
}否则{
elementInputError&&setDisplayError（elementInputError，“无”）；
返回true；
}
}捕获（错误）{
错误（“requireInput=>”，错误）
返回false；
}
}
函数setDisplayError（元素、值）{
试一试{
element.style.display=值；
}捕获（错误）{
错误（“setDisplayError=>”，错误）
}
}

验证您的姓名：
名字
名字是必需的
姓
姓是必需的

函数validateForm（表单
<script type="text/javascript">
function validateForm(e) {
    form = e.target;
    formValid = true;
    for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i]))
            formValid = false;
    }
    return formValid;
}

function requiredInput(element) {
    if (element.type == 'submit') {
        return true;
    }
    if (element.value.length == 0) {
        document.getElementById(element.id + 'Error').style.display = "inline-block";
        return false;
    } else {
        document.getElementById(element.id + 'Error').style.display = "none";
        return true;
    }
}