Question

我正在做一些验证，我不明白为什么它不起作用。

我要做的是使用带有文本字段的两个单选按钮进行搜索。如果选中一个并且文本字段为空，我会尝试发出警报！

我的代码甚至没有运行javascript

这是我的脚本

function validater() {
    with(document) {

        if (document.getElementById("textch").value == "") {
            alert("Please enter Child Id Or Name");

        }
        return false;

    }
}

这里是jsp代码：

<form:form commandName="searchdetails" action="viewChild" id="childsearch" method="post" onSubmit="return validater();">



<td height="56" colspan="3">
<div align="center">
<form:radiobutton path="fieldvalue" value="childid" id="type"  onClick="Selecttype('selecttypechild?','childid')"/>
  Child ID
 <form:radiobutton path="fieldvalue" value="name" id="type" onClick="Selecttype('selecttypechild?','name');"/>
  Name  
  <form:radiobutton path="fieldvalue" value="dob" id="type" onClick="Selecttype('selecttypechild?','dob')"/>
   DOB  
    <form:radiobutton path="fieldvalue" value="admit" id="type" onClick="Selecttype('selecttypechild?','admit')"/>
    Admit period  
   </div></td>


 <div id="chname" > 
  <c:if test="${empty stype}">
  <form:input   path="textvalue" placeholder="Type here" id="textch"/>
  </c:if>
<c:if test="${stype eq 'textbox'}">
<form:input  type="text" path="textvalue" placeholder="Type here" id="textcha"/>
  </c:if>

<input id="submit" type="submit" value="Go">

Answer 1

您的HTML无效。您不能将<td>作为<form>的子元素。

当浏览器错误从放置在不允许使用的表的部分中的元素恢复时，它们通常将放在表之后。

这会导致您的表单位于表格之外，但您的输入位于表格内。

由于提交按钮不在表单内，因此不会提交表单。由于它不会提交表单，因此不会触发提交事件，也不会运行JS。

您可以嵌套表单和表的唯一方法是将表单完全包含在表格单元格或表格中的整个表格中。

使用a validator。写有效的HTML。

（并避免使用表格进行布局）。

Answer 2

在没有with(document)和value === ""而不是value == ""

的情况下尝试此操作

function validater() {
    if (document.getElementById("textch").value === "") {
        alert("Please enter Child Id Or Name");
    }
    return false;
}

或者您只需使用Html5 Attribute

即可

<input type="text" id="textch" required>

javascript验证无法按预期工作

2 个答案: