javascript - My required field message not showing in proper place -
the above pic resultant screen both , fields mandatory required message showing somewhere else in dom. how can show besides correct field?
here 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>can 1 on this?
reasons : few required fields in hidden.
solution : add following lines in script tag.
<script> $(function(){ $("#billdatefrom").removeattr("required"); $("#billdateto").removeattr("required"); $("#bankdatefrom").removeattr("required"); $("#bankdateto").removeattr("required"); $("#employee_id").removeattr("required"); }); </script> 
Comments
Post a Comment