0
부트 스트랩 버전을 사용 중입니다. 3과 bootstrapValidator ver. 0.5.2 및 Datetimepicker ver. 3. 내 문제는 오류 메시지가 있어야하는 위치가 아닌 첫 번째 날짜 위에 서로 3 개의 날짜를 확인하는 것입니다. 나는 그것이 같은 폼 그룹에서 3 개의 컨트롤을 모두 사용하고 있다는 사실과 관련이 있다는 것을 알고 있지만 어떻게 수정해야할지 모르겠다. 아래에 스크린 샷과 코드를 포함 시켰습니다. 스크린 샷에서 팝업이 'Incident Date'상단에 있고 커서가 'Resolution Due Date'에 있음을 볼 수 있습니다. 사전에부트 스트랩 3 복수 날짜 유효성 확인
감사합니다!
HTML
<div class="form-group">
<div class="row">
<div class="col-md-8">
<label class="control-label">Title</label>
<input type="text" class="form-control input-lg" placeholder="*Required" name="txtTitle" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#form1').bootstrapValidator({
container:'popover',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtTitle: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The Title is required and cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of alphabetical and number'
}
}
},
dtpNIncidentDate: {
validators: {
notEmpty: {
message: 'Incident Date is required and cannot be empty'
}
}
},
dtpNDateAssigned: {
validators: {
notEmpty: {
message: 'Date Assigned is required and cannot be empty'
}
}
},
dtpNResolutionDate: {
validators: {
notEmpty: {
message: 'Resolution Date is required and cannot be empty'
}
}
}
}
});
$('#dtpIncidentDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNIncidentDate');
});
$('#dtpDateAssigned')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNDateAssigned');
});
$('#dtpResolutionDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNResolutionDate');
});
});
그냥 sugestion : 확인을 위해 http://jqueryvalidation.org를 사용하십시오. 더 좋습니다. –