1
0
mirror of https://github.com/fspc/workstand.git synced 2025-02-23 01:13:22 -05:00

Disable form until valid.

This commit is contained in:
Drew Larson 2017-05-01 19:02:24 -06:00
parent 2f9db5bf32
commit ea76a2fe17
2 changed files with 22 additions and 2 deletions

View File

@ -4,7 +4,8 @@
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script>
dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
var dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
var submitButton = document.getElementById('submit');
dateOfBirthInput.addEventListener('blur', function(event) {
var input = event.target;
@ -23,6 +24,16 @@
}
});
var form = document.getElementsByTagName('form')[0];
var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
var textAreas = Array.prototype.slice.call(document.getElementsByTagName('textarea'));
for (var el of inputs.concat(textAreas)) {
el.addEventListener('change', function() {
submitButton.disabled = !form.checkValidity()
})
}
</script>
{% endblock %}
@ -220,7 +231,7 @@
</div>
<div class="mdl-grid">
<div class="mdl-cell">
<button id="submit" type="submit"
<button disabled id="submit" type="submit"
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
Save</button>
</div>

View File

@ -25,6 +25,15 @@
var waiverCheckBox = document.getElementById('{{ form.waiver_substitute.id_for_label }}');
var submitButton = document.getElementById('submit');
var form = document.getElementsByTagName('form')[0];
var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
for (var anInput of inputs) {
anInput.addEventListener('change', function() {
submitButton.disabled = !form.checkValidity()
})
}
var requiredCheckboxes = function() {
return waiverCheckBox.checked;
};