Question

我的输入表单验证需要帮助。我不会同时收到所有错误消息，但只会出现在名字的第一个文字中，并且首先出现名字＆＃39;

我的HTML代码：

<body>

    <img id="logo2" src="logo2.jpg">

    <div id="request-container">

            <h2>REQUEST A DEMO</h2>

            <div id="request">

                <p>First Name *</p>
                <input id="1"  type="text">
                <span id="empty"></span>

                <p>Last Name *</p>
                <input id="2" type="text">
                <span id="empty"></span>

                <p>Email *</p>
                <input id="3"  type="email">
                <span id="empty"></span>

                <p>Phone *</p>
                <input id="4" type="tel">
                <span id="empty"></span>

                <p>Company Name *</p>
                <input id="5"  type="text">
                <span id="empty"></span>

                <p>Company Website *</p>
                <input id="6" type="email">
                <span id="empty"></span>

                <p>Country *</p>
                    <select id="country">
                        <option></option>
                        <option>India</option>
                        <option>USA</option>
                        <option>Canade</option>
                        <option>Australia</option>
                        <option>China</option>
                        <option>South Africa</option>
                        <option>Russia</option>
                        <option>Germany</option>
                    </select>
                <span id="empty"></span>

                <div id="demo" onclick="return validateForm()">Schedule a Demo!</div>

            </div>


    </div>

我的JavaScript代码：

<script type="text/javascript">

    function validateForm()
    {
        var ok=true;
        var first=document.getElementById('1').value;
        var last=document.getElementById('2').value;
        var email=document.getElementById('3').value;
        var phone=document.getElementById('4').value;
        var company=document.getElementById('5').value;
        var website=document.getElementById('6').value;

        if (first == "" || first== null) 
            {
                    document.getElementById('empty').innerHTML="This field is required";
                    ok=false;

            }

        if (last == ""|| last== null) 
            {
                    document.getElementById('empty').innerHTML="This field is required";    
                    ok= false;

            }

        if (email == ""|| email== null) 
            {   
                    document.getElementById('empty').innerHTML="This field is required";    
                    ok=false;

            }

        if (phone == "" || phone==null) 
            {
                    document.getElementById('empty').innerHTML="This field is required";
                    ok= false;

            }

        if (company == ""|| company== null) 
            {
                    document.getElementById('empty').innerHTML="This field is required";
                    ok= false;

            }

        if (website == ""|| website== null) 
            {
                    document.getElementById('empty').innerHTML="This field is required";
                    ok= false;

            }


        return ok;

    }

        document.getElementById('demo').onclick = function  () 

        {
            validateForm();
        }

    </script>

Answer 1

是的，正如大卫所说，你需要在这些跨度中放置的ID是唯一的。您还需要从JavaScript中引用这些唯一ID。此外，定义onclick两次没有意义。因此，例如，您可以将onclick定义一次保留在HTML标记中，如此

<input id="demo" type="button" value="Schedule a Demo!" onclick="return validateForm()">

并删除已定义onclick的其他匹配项，即JavaScript代码中的以下内容：

document.getElementById('demo').onclick = function  ()

{
    validateForm();
}

Answer 2

主要问题是您的id值不是唯一的，它们需要符合HTML规范。而且根据原因，真的。毕竟，标记中的哪个元素应该引用它？：

document.getElementById('empty')

使用有意义的（和唯一）标识符。例如：

<p>First Name *</p>
<input id="firstNameInput" type="text">
<span id="firstNameMessage"></span>

然后更新代码以使用这些标识符：

var first=document.getElementById('firstNameInput').value;
//...
if (first == "" || first== null) 
{
    document.getElementById('firstNameMessage').innerHTML = "This field is required";
    ok=false;
}

重复其他元素。

需要输入表单验证

2 个答案: