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…
	
	Add table
		
		Reference in a new issue
	
	 Sachi King
						Sachi King