验证多个表单框,javascript

时间:2017-05-15 14:44:30

标签: javascript html

我试图确保填写每个字段,否则显示错误。当我提交表单时,它会通过并且没有显示错误?谁能看到什么错了?

这是我的表单 HTML

<form id="Form" name="Form" method: "post" action: '#' onsubmit="return validateForm()">
    <fieldset>
        <label>First name:*<br>
            <input name="fname" id ="fname" type="text"></label><br>
        <label>Last name:*<br>
            <input name="lname" id="lname" type="text"></label><br>
        <label>Email:*<br>
            <input name="email" id="email" type="text"></label><br>
        <label>Phone:<br>
            <input name="phone" id="phone" type="text"></label><br>
        <label>Message:*<br>
            <input id="message" id="message" name="msg" type="text"></label><br>
        <br>
        <input name="submit" type="submit" value="send"><br>
    </fieldset>
</form>

这是我的 JS

function validateForm() {
    var errormessage = "";

    if (document.getElementbyID('fname').value == "") {
        errormessage += "enter your first name /n";
        document.getElementById('fname').style.borderColor = "red";
    }
    if (document.getElementbyID('lname').value == "") {
        errormessage += "enter your last name /n";
        document.getElementById('lname').style.borderColor = "red";
    }
    if (document.getElementbyID('email').value == "") {
        errormessage += "enter your email /n";
        document.getElementById('email').style.borderColor = "red";
    }
    if (document.getElementbyID('message').value == "") {
        errormessage += "enter your message /n";
        document.getElementById('message').style.borderColor = "red";
    }
    if (errormessage != "") {
        alert(errormessage);
        return false;
    }
}

1 个答案:

答案 0 :(得分:4)

在浏览器中打开开发人员工具。看看控制台。确保&#34;保留日志&#34;选项已启用,因此表单提交时错误不会丢失。

  

未捕获的TypeError:document.getElementbyID不是函数

JavaScript区分大小写。 ID不是Id。您需要正确调用函数调用的名称。

当你的JS抛出异常时,函数会中止,表单提交将继续正常进行。