내 필수 항목 메시지가 적절한 위치

위의 그림은에서와 필드에 모두 필수 내 결과 화면되어 있습니다에 표시되지하지만 필요한 메시지는 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(){ 
 
\t var index = document.getElementById('search_criteria').selectedIndex 
 

 
\t if(index=='0'){ 
 
\t  document.getElementById('employeeIdSearch').style.display = 'none' 
 
\t  document.getElementById('billDateSearch').style.display = 'none' 
 
\t  document.getElementById('bankDateSearch').style.display = 'none' 
 

 
\t \t document.getElementById('employeeIdSearch').value = '' 
 
\t  document.getElementById('billDateSearch').value = '' 
 
\t  document.getElementById('bankDateSearch').value = '' 
 
\t \t \t } 
 
\t 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 = '' 
 
\t \t } 
 
\t else if(index=='2'){ 
 
\t  document.getElementById('billDateSearch').style.display = '' 
 
\t  document.getElementById('employeeIdSearch').style.display = 'none' 
 
\t  document.getElementById('bankDateSearch').style.display = 'none' 
 
\t \t document.getElementById('employeeIdSearch').value = '' 
 
\t  document.getElementById('bankDateSearch').value = '' 
 
\t \t \t } 
 
\t else if(index=='3'){ 
 
\t  document.getElementById('bankDateSearch').style.display = '' 
 
\t  document.getElementById('employeeIdSearch').style.display = 'none' 
 
\t  document.getElementById('billDateSearch').style.display = 'none' 
 
\t \t document.getElementById('employeeIdSearch').value = '' 
 
\t  document.getElementById('billDateSearch').value = '' 
 
\t \t \t } 
 
\t } 
 
function stopLoadImg(){ 
 

 
\t 
 
} 
 
\t </script> 
 

 
\t <style type="text/css"> 
 
\t #formContent{ 
 
\t background-color:#cdcdcd; 
 
\t text-align:center; 
 
\t margin-left:135px; 
 
\t border: 2px solid cadetblue; 
 
    box-shadow: 3px 3px 3px #777; 
 
    transition: margin 0.2s ease-out; 
 

 
\t } 
 
\t .form-group{ 
 
\t padding-top:15px; 
 
\t } 
 
\t .control-label{ 
 
\t text-align:right; 
 
\t } 
 
\t .form-row{ 
 
\t text-align:left: 
 
\t } 
 
\t #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>

이에 수있는 한 도움이됩니다?

출처

2016-09-07 Abhilash Shajan

이유 : 소수의 필수 입력란이 숨겨져 있습니다.

해결책 : 다음 행을 스크립트 태그에 추가하십시오.

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

출처

2016-09-09 06:25:01

내 필수 항목 메시지가 적절한 위치

답변

관련 문제