The above pic is my resultant screen both From and To fields are mandatory but the required message is showing somewhere else in the DOM. How can i show this besides the correct field?
这是我的 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>有人可以帮忙吗？
最佳答案
原因:隐藏的必填字段很少。
解决方案:在脚本标记中添加以下行。
<script>
$(function(){
$("#billDateFrom").removeAttr("required");
$("#billDateTo").removeAttr("required");
$("#bankDateFrom").removeAttr("required");
$("#bankDateTo").removeAttr("required");
$("#employee_id").removeAttr("required");
});
</script>
关于javascript - 我的必填字段消息未显示在正确的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39371280/