Question

我正在尝试验证表单。我这样做是通过创建一个JS代码来确保所有文本字段中至少包含一个字符，如果没有，则禁用提交按钮。但是，当我运行此代码时，我的提交按钮在仅填写一个字段后变为活动状态。

如果您发现任何错误等，请指出它们，欢呼。

这是我的HTML

<form name = "form" onsubmit="validate()">
        <h3>Please complete the form below. Mandatory fields marked with *</h3>
        <fieldset>
            <h4>Personal Details</h4>
            <p>
           <label for="fname">*First Name</label> <input type="text" name="fname" id="fname" placeholder="First Name" onKeyup="validate()" class = "form"  >
            </p>
            <p>
            <label for="lname">*Last Name</label> <input type="text" name="lname" id="lname" placeholder="Last Name" onKeyup="validate()" class = "form" />
            </p>
            <p>
            <label for="Etype">Gender</label>
                <select class = "form" id="gender" name="gender"><option value="">Select...</option>

                    <option value="male">Male</option>

                    <option value="female">Female</option>
                </select>
            </p>

            <p>
            <label for="age">*Age</label>
                <select class = "form" id="age" name="age"><option value="">Select...</option>

                    <option value="youngest">3-7</option>

                    <option value="young">7-12</option>

                    <option value="teen">12-16</option>

                    <option value="young-adult">16-18</option>

                    <option value="adult">18+</option>

                </select>
                </p>

                <p>
                <label for="s_add">*Street Address</label> <input type="text" name="s_add" id="s_add" placeholder="Insert Street Address" onKeyup="validate()" class = "form" />
                </p>
                <p>
                <label for="s_sub">*Suburb</label> <input type="text" name="s_sub" id="s_sub" placeholder="Suburb" onKeyup="validate()" class = "form"/>
                </p>
                <p>
                <label for="state">*State</label> <input type="text" name="state" id="state" onKeyup="validate()" class = "form" />
                </p>
                <p>
                <label for="pcode">*Postcode</label> <input type="text" name="pcode" id="pcode" onKeyup="validate()" class = "form" />
                </p>
                <p>
                <label for="phone">*Phone</label> <input type="text" name="phone" id="phone" placeholder="Mobile or Home" onKeyup="validate()" class = "form"/>
                </p>
                <p>
                <label for="email">*Email</label> <input type="text" name="email" id="email" placeholder="Email Address" onKeyup="validate()" class = "form"/>
                </p>

            </fieldset>

            <fieldset>
                <h4>Emergency Contact</h4>
                <p> please select someone within a close vicinity of 'Clowning Around'. </p>
                <p>
                <label for="fname">*First Name</label> <input type="text" name="fname" id="fname" onKeyup="validate()" placeholder="First Name" class = "form" /> 
                </p>
                <br>
                <p>
                <label for="lname">*Last Name</label> <input type="text" name="lname" id="lname" placeholder="Last Name" onKeyup="validate()" class = "form" />
                </p>
                <br>
                 <p>
                <label for="s_add"> *Street Address</label> <input type="text" name="s_add" id="s_add" placeholder="Insert Street Address" onKeyup="validate()" class = "form" />
                </p>
                <br>
                  <p>
                <label for="Mnum"> *Mobile Number</label> <input type="text" name="Mnum" id="Mnum" placeholder="Mobile Number" class = "form" />
                </p>
                <br>
                <p>
                <label for="Relationship"> *Relationship</label> <input placeholder="E.g Parent" class = "form"/>
               </p>
               <br>
               <p>
            <input id="SubmitButton" type="submit" disabled="disabled" value="Submit" />
        </fieldset>
        <fieldset>
        <h4> Type of Enrollment </h4>
        <label for="Etype">*What would you like to enrol in?</label>
                <select class = "form" id="Etype" name="Etype"><option value="">Select...</option>

                    <option value="Camp">Camp</option>

                    <option value="Class">Class</option>
                </select>
    </p>
</form>
</body>
</fieldset>

你可以在我的代码中看到我添加了onKeyup =＆＃34; validate（）＆＃34;在输入中。

这是我的JS

window.onload = function() {
    console.log("The window has finished loading");


    var SubmitButton = document.getElementById("SubmitButton");
    SubmitButton.addEventListener('click', function() {
    console.log("The submit button has been clicked");}, false);

    var fname = document.getElementById("fname");
    fname.addEventListener('keyup', function() {
    console.log((fname).value);}, false);

    var lname = document.getElementById("lname");
    lname.addEventListener('keyup', function() {
    console.log((lname).value);
    validate();}, false);
}

function validate() 

     {
        var x = document.forms["form"].elements;
        var xbutton = true;

        for (var i = 0; i < xbutton.length; i++) {
            if (x[i].value.length == 0) xbutton = false;
        }

        if (xbutton) {
             document.getElementById('SubmitButton').disabled = !xbutton;
        }
    }

我已经添加了第一个函数，以防它相关。

编辑：我修复了var i = 0;我＆lt; xbutton.length;我++ 到x.length

现在，当我运行代码时，我得到一个未捕获的TypeError：无法读取属性＆＃39; length＆＃39;未定义的

代表(x[i].value.length == 0) xbutton = false;

的行

任何想法？

Answer 1

for循环不正确，您引用xbutton.length但它应该是x.length，因为x是元素列表，xbutton是布尔值：

for (var i = 0; i < x.length; i++) {

此外，您还使用内联onkeyup和addEventListener来复制事件处理程序。使用其中一种。

最后，在onsubmit处理程序中，如果验证失败，则需要return false以防止表单提交。

发生新错误是因为fieldset列表中包含form.elements个元素，因此您尝试获取不存在的字段集的value。要解决此问题，请添加条件以检查该元素是否为input[type=text]：

for (var i = 0; i < x.length; i++) {
    if(x[i].tagName == 'INPUT' && x[i].type == 'text'){
        if (x[i].value.length == 0) xbutton = false;
    }
}

onkeyup（功能）没有注册

1 个答案: