使用 javascript 的 html 表单验证

Question

我正在尝试使用 javascript 验证我的 html 表单。 验证有效，但它仍然提交。 IE。 单击提交时，会出现一个文本，说“需要名字”，但仍然提交。

这是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;

}

这是表单的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

Answer 1

您的验证具有正确的结构，但是，如果有任何 JavaScript 错误，“返回假”不会取消表单提交。

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

<form id="myform"...

然后，您可以在控制台中引用它：

validateForm(document.getElementById('form'));

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

Answer 2

我认为你需要验证它的类型是否提交：

    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;

    }

Answer 3

使用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;
}

并在onsubmit函数中传递事件对象，如下所示。

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="validateForm(event, this);">

Answer 4

其实你可以用简单的方法来做，见下文，

1. 修改您的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>

2. 删除你的 JS 函数并这样做，

    $("#dsds").submit(function(e){ //call your functions here return false; // return true if you want to submit the form });

看例子， JSFille

Answer 5

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get"
  onsubmit="return validateForm(event)">
<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>

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

这应该有效

Answer 6

 function validateForm(form) { formValid = true; try { for (i = 0; i < form.length; i++) { if (!requiredInput(form[i])) formValid = false; } } catch (error) { console.error("validateForm=>", error) } return formValid; } function requiredInput(element) { try { const elementInputError = document.getElementById(element.id + 'Error'); if (!element.value.length) { elementInputError && setDisplayError(elementInputError,"inline-block"); return false; } else { elementInputError && setDisplayError(elementInputError,"none"); return true; } } catch (error) { console.error("requiredInput=>", error) return false; } } function setDisplayError(element,value) { try { element.style.display =value; } catch (error) { console.error("setDisplayError=>", error) } }

 <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>

出现问题是因为它还验证了发送按钮，并且因为它没有终止失败的 id，所以它无法找到该项目并且发生了错误。 然后当发生错误时，它没有返回任何函数并将您重定向到表单操作页面。