Question

如果我的复选框都没有被选中且输入字段没有被填充，我想使用js来检查表单。在这种情况下，用户应该收到一条消息，告诉他们至少做出一个选择或制定自己的选择。

表单元素......

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />

<input type="text" id="Text" class="textfield" value="please enter text." maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />

执行POST方法时，

...由此js函数检查：

function checkFormElement() {
if ((document.getElementById("text").value == "please enter text.")
    && (document.getElementById("checkboxA").checked == false)
    && (document.getElementById("checkboxB").checked == false)
    && (document.getElementById("checkboxC").checked == false)){
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;

}

我想使用jQuery应该会容易得多，但我仍然想知道如何在纯js中解决这个问题。

Answer 1

案件与ID值有关，因此请更改：

document.getElementById("text").value

以匹配您在HTML中的内容：

document.getElementById("Text").value

我修复了案例问题并输入了实际调用checkFormElement()的代码后，它似乎在这里工作正常：http://jsfiddle.net/jfriend00/9DHxF/

Answer 2

您错过了submit或类似类型的按钮\选项，它将运行checkFormElement()。一旦你包含了调用这个函数的东西，你就不会遇到任何问题。

Answer 3

您的代码中有一些错误。大多数不匹配的ID等。

这里的工作示例：http://jsfiddle.net/E8SBq/

这应该适合你：

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />

<input type="text" id="Text" class="textfield" value="please enter text" maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />
<input type="submit" value="Submit" onClick="checkFormElement()" />

JS功能：

function checkFormElement() {
if (document.getElementById("Text").value != null  
    && document.getElementById("checkboxA").checked == false
    && document.getElementById("checkboxB").checked == false
    && document.getElementById("checkboxC").checked == false) {
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;

}

用于验证元素值和复选框的Javascript

3 个答案: