Question

所以我正在为一个网站制作一个注册表单，但它并没有完全正常工作。只有前五个条目才会让你继续进行，直到你把它们填满，但是在城市之后，即使其他人没有填写，它仍然会通过。我无法弄清楚我需要添加什么来防止它从提交，除非所有部分都填写完毕。请帮忙，谢谢。

<script>


function validateForm(){
    if ((document.forms["myForm"]["fname"].value == "") || (document.forms["myForm"]["fname"].value == null))
    {
        alert("First Name is required!");
        return false;
    }

    if ((document.forms["myForm"]["lname"].value == "") || (document.forms["myForm"]["lname"].value == null))
    {
        alert("Last Name is required!");
        return false;
    }

    if ((document.forms["myForm"]["email"].value == "") || (document.forms["myForm"]["email"].value == null))
    {
        alert("Email is required!");
        return false;
    }

    if ((document.forms["myForm"]["street"].value == "") || (document.forms["myForm"]["street"].value == null))
    {
        alert("Street is required!");
        return false;
    }`
    if ((document.forms["myForm"]["city"].value == "") || (document.forms["myForm"]["city"].value == null))
    {
        alert("City is required!");
        return false;
    }

    if ((document.forms["myForm"]["Postal Code"].value == "") || (document.forms["myForm"]["Postal Code"].value == null))
    {
        alert("Postal Code is required!");
        return false;
    }

    if ((document.forms["myForm"]["gender"].value == "") || (document.forms["myForm"]["gender"].value == null))
    {
        alert("Gender is required!");
        return false;
    }

    if ((document.forms["myForm"]["day"].value == "") || (document.forms["myForm"]["day"].value == null))
    {
        alert("Day is required!");
        return false;
    }

    if ((document.forms["myForm"]["year"].value == "") || (document.forms["myForm"]["year"].value == null))
    {
        alert("Year is required!");
        return false;
    }

    return true;
}

这是HTML

<form name="myForm" action="thanks.html" method="post" onSubmit="return validateForm()"/>

<table id="table2" style="margin-top:50px; margin-left:900px; background-image: url(images/roses.jpg);">
<tr>
    <td id="label">First Name:</td>
    <td id="input_fields">
        <input type="text" name="fname" maxlength="15" />
        <i id="star">*</i>

    </td>
</tr>
<tr>
    <td id="label">Last Name:</td>
    <td id="input_fields">
        <input type="text" name="lname" maxlength="15" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">E-Mail:</td>
    <td id="input_fields">
        <input type="text" name="email" maxlength="25" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">Street Address:</td>
    <td id="input_fields">
        <input type="text" name="street" maxlength="25" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">City:</td>
    <td id="input_fields">
        <input type="text" name="city" maxlength="25" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">State:</td>
    <td id="input_fields">
        <input type="text" name="state" maxlength="25" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">Postal code:</td>
    <td id="input_fields">
        <input type="text" name="Postal code" maxlength="25" /><i id="star">*</i>
    </td>
</tr>
<tr>
    <td id="label">Gender:</td>
    <td id="input_fields">
        Male:<input type="radio" name="gender" value="male" />
        Female:<input type="radio" name="gender" value="female" />
        Other:<input type="radio" name="gender" value="other" />
    </td>
</tr>
<tr>
    <td id="label">Date of Birth:</td>
    <td id="input_fields">
        <select>
            <option></option>
            <option>JAN</option>
            <option>FEB</option>
            <option>MAR</option>
            <option>APR</option>
            <option>MAY</option>
            <option>JUN</option>
            <option>JUL</option>
            <option>AUG</option>
            <option>SEP</option>
            <option>OCT</option>
            <option>NOV</option>
            <option>DEC</option>
        </select>

        <input type="text" name="day" maxlength="2" size="4"/>
        <input type="text" name="year" maxlength="4" size="4"/><i id="star">*</i>
    </td>
</tr>
<tr>
    <td></td>
    <td id="input_fields">
        <input type="submit" name="submit_button" value="Submit" />
    </td>
</tr>

在这里注册！

Answer 1

在下面的代码中删除右括号后的刻度线。

if ((document.forms["myForm"]["street"].value == "") || (document.forms["myForm"]["street"].value == null))
{
    alert("Street is required!");
    return false;
}**`**

Answer 2

使用以下内容替换邮政编码验证：

if ((document.forms["myForm"]["postalCode"].value == "") || (document.forms["myForm"]["PostalCode"].value == null))
{
     alert("Postal Code is required!");
     return false;
}

并将表格的邮政编码输入重命名为 postalCode ，即

<input type="text" name="postalCode" maxlength="25" /><i id="star">*</i>

请注意，validateForm函数不会检查状态。我假设你因为星号而需要它。

Answer 3

问题是你的表单元素（输入，按钮等）不在表单html元素中。您需要进行2项更改：

删除JavaScript中的后退标记（`）。
更改您的表单元素，以便您只有一个开头的html元素（从<form/>到<form>，然后在表</form>

这是一个工作小提琴：https://jsfiddle.net/s9wk1kez/（在输出面板右侧滚动）

同样如前所述，您在标记中有多个ID，这是无效的HTML。如果你想要有工作标签。（您可以单击它们以获取单选按钮，它们对应于相关按钮）您应该查看标签的文档。例如<label for="[id-of-html-element]">Male</label>

注册表单继续显示空白条目

在这里注册！

3 个答案: