Question

以上图片是我的结果屏幕，From和To字段都是必填字段，但所需的消息显示在DOM中的其他位置。除了正确的字段外，我怎么能显示这个？

这是我的gsp

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

   <title>Report</title>
   <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js'></script>
  <script type="text/javascript">

  angular.module("todo", []);
  function hideCriteria(){
	var index = document.getElementById('search_criteria').selectedIndex

	if(index=='0'){
	     document.getElementById('employeeIdSearch').style.display = 'none'
	     document.getElementById('billDateSearch').style.display = 'none'
	     document.getElementById('bankDateSearch').style.display = 'none'

		 document.getElementById('employeeIdSearch').value = ''
	     document.getElementById('billDateSearch').value = ''
	     document.getElementById('bankDateSearch').value = ''
			}
	else if(index=='1'){
     document.getElementById('employeeIdSearch').style.display = ''
     document.getElementById('billDateSearch').style.display = 'none'
     document.getElementById('bankDateSearch').style.display = 'none'
     document.getElementById('billDateSearch').value = ''
     document.getElementById('bankDateSearch').value = ''
		}
	else if(index=='2'){
	     document.getElementById('billDateSearch').style.display = ''
	     document.getElementById('employeeIdSearch').style.display = 'none'
	     document.getElementById('bankDateSearch').style.display = 'none'
		 document.getElementById('employeeIdSearch').value = ''
	     document.getElementById('bankDateSearch').value = ''
			}
	else if(index=='3'){
	     document.getElementById('bankDateSearch').style.display = ''
	     document.getElementById('employeeIdSearch').style.display = 'none'
	     document.getElementById('billDateSearch').style.display = 'none'
		 document.getElementById('employeeIdSearch').value = ''
	     document.getElementById('billDateSearch').value = ''
			}
	  }
function stopLoadImg(){

	
}
	</script>

	<style type="text/css">
	#formContent{
	background-color:#cdcdcd;
	text-align:center;
	margin-left:135px;
	border: 2px solid cadetblue;
    box-shadow: 3px 3px 3px #777;
    transition: margin 0.2s ease-out;

	}
	.form-group{
	padding-top:15px;
	}
	.control-label{
	text-align:right;
	}
	.form-row{
	text-align:left:
	}
	#billDateFrom-trigger{
    cursor: pointer;
}
#billDateTo-trigger{
   cursor: pointer;
}
#bankDateFrom-trigger{
   cursor: pointer;
}
#bankDateTo-trigger{
   cursor: pointer;
}
    </style>
 </head>
<body>

<g:formRemote name="billSearchForm" class="form-horizontal" onComplete="stopLoadImg()" url="[controller: 'Report', action:'searchAjax']">
<div id="formContent" class="col-sm-5">
   <br/>
    <div class="form-group">
      <label class="<%--control-label--%> col-sm-4" for="search_criteria">Search by:</label>
      <div class="col-sm-4 form-row">
         <g:select name='search_criteria' required id='search_criteria' from="${['Employee ID','Bill Date range', 'Bank submitted date range']}"
          noSelection="['':'---select---']" onchange="hideCriteria()"/>
      </div>
     </div>
       <div id="employeeIdSearch" class="form-group" style="display:none;">
          <%--<label class="control-label col-sm-4" for="employee_id">ID:</label>--%>
      <div class="col-sm-12 form-row">
          ID: <g:textField name='employee_id'  required id='employee_id' onkeypress="isAlphaNumeric(event)"/>
      </div>
      </div>
      
        <div id="billDateSearch" class="form-group" style="display:none;">
          <%--<label class="control-label col-sm-1" for="billDateFrom">From:</label>--%>
      <div class="col-sm-6 form-row">
      From: <calendar:datePicker name="billDateFrom"  required id='billDateFrom' defaultValue=""/>
      </div>
          <%--<label class="control-label col-sm-1" for="billDateTo">To:</label>--%>
      <div class="col-sm-6 form-row">
      To: <calendar:datePicker name="billDateTo"  required id='billDateTo' defaultValue=""/>
      </div>
      </div>
      
      <div id="bankDateSearch" class="form-group" style="display:none;">
          <%--<label class="control-label col-sm-2" for="bankDateFrom">From:</label>--%>
      <div class="col-sm-6 form-row">
      From: <calendar:datePicker name="bankDateFrom"  required id='bankDateFrom' defaultValue=""/>
      </div>
         <%--<label class="control-label col-sm-1" for="bankDateTo">To:</label>--%>
      <div class="col-sm-6 form-row">
      To: <calendar:datePicker name="bankDateTo"  required id='bankDateTo' defaultValue=""/>
      </div>
      </div>
      <div class="col-sm-offset-1 col-sm-10">
      <br/>
        <button type="submit" class="btn btn-default">Submit</button>
      <br/>
      <br/>
      </div>
</div>
</g:formRemote>
</body>
</html>

任何人都可以提供帮助吗？

Answer 1

原因：隐藏了几个必填字段。

解决方案：在脚本代码中添加以下行。

<script>
    $(function(){
          $("#billDateFrom").removeAttr("required");
          $("#billDateTo").removeAttr("required");
          $("#bankDateFrom").removeAttr("required");
          $("#bankDateTo").removeAttr("required");
          $("#employee_id").removeAttr("required");              
        });
</script>

我的必填字段消息未显示在正确的位置

1 个答案: