Add regex validation [A-Z0-9]{6} for input
Don't block submition, but give the user a red bar. Also a link to overview. Esp if it is 5+ sec to load, we don't need it 90%+ the time, don't page through it in the scan print workflow.
This commit is contained in:
parent
f25f85f86e
commit
4b5fe34335
1 changed files with 31 additions and 6 deletions
|
@ -8,19 +8,44 @@
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div>
|
<div>
|
||||||
<div class="form-group">
|
<div id="code_div" class="form-group has-feedback has-error">
|
||||||
<label for="bpcode">Boarding Pass Code</label>
|
<label class="control-label" for="bpcode">Boarding Pass Code</label>
|
||||||
<input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code">
|
<input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code">
|
||||||
|
<span id="input_icon" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
||||||
|
<span id="help_ok" class="help-block" style="display: none;">Format appears OK</span>
|
||||||
|
<span id="help_ur" class="help-block" style="display: block;">Format doesn't match</span>
|
||||||
</div>
|
</div>
|
||||||
<button id="bpredir" class="btn btn-default">Submit</button>
|
<button id="bpredir" class="btn btn-primary">Submit</button>
|
||||||
<button id="clear" class="btn btn-default">Clear</button>
|
<button id="clear" class="btn btn-danger">Clear</button>
|
||||||
|
<a type=button" class="btn btn-info pull-right" href="{% url 'regidesk:boarding_overview' %}">Overview</a>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
var code_div = document.getElementById("code_div");
|
||||||
|
var icon = document.getElementById("input_icon");
|
||||||
|
var tb = document.getElementById("bptext");
|
||||||
|
var ok = document.getElementById("help_ok");
|
||||||
|
var unk = document.getElementById("help_ur");
|
||||||
|
var re = new RegExp('^[A-Z0-9]{6}$');
|
||||||
document.getElementById("bpredir").onclick = function() {
|
document.getElementById("bpredir").onclick = function() {
|
||||||
location.href = document.getElementById("bptext").value;
|
location.href = tb.value;
|
||||||
};
|
};
|
||||||
document.getElementById("clear").onclick = function() {
|
document.getElementById("clear").onclick = function() {
|
||||||
document.getElementById("bptext").value = "";
|
tb.value = "";
|
||||||
|
};
|
||||||
|
tb.oninput = function() {
|
||||||
|
is_good = re.test(tb.value);
|
||||||
|
if (is_good) {
|
||||||
|
code_div.className = "form-group has-feedback has-success";
|
||||||
|
icon.className = "glyphicon glyphicon-ok form-control-feedback";
|
||||||
|
ok.style.display = "block";
|
||||||
|
unk.style.display = "none";
|
||||||
|
} else {
|
||||||
|
code_div.className = "form-group has-feedback has-error";
|
||||||
|
icon.className = "glyphicon glyphicon-remove form-control-feedback";
|
||||||
|
ok.style.display = "none";
|
||||||
|
unk.style.display = "block";
|
||||||
|
}
|
||||||
|
console.log(is_good);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue