updated validation and auto submit
This commit is contained in:
@@ -2,6 +2,400 @@
|
||||
{% block title %}Scan Module{% endblock %}
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/scan.css') }}">
|
||||
<style>
|
||||
.error-message {
|
||||
color: #ff4444;
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
.error-message.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const operatorCodeInput = document.getElementById('operator_code');
|
||||
const cpCodeInput = document.getElementById('cp_code');
|
||||
const oc1CodeInput = document.getElementById('oc1_code');
|
||||
const oc2CodeInput = document.getElementById('oc2_code');
|
||||
const defectCodeInput = document.getElementById('defect_code');
|
||||
const form = document.querySelector('.form-centered');
|
||||
|
||||
// Create error message element for operator code
|
||||
const operatorErrorMessage = document.createElement('div');
|
||||
operatorErrorMessage.className = 'error-message';
|
||||
operatorErrorMessage.id = 'operator-error';
|
||||
operatorErrorMessage.textContent = 'Please scan Quality Operator code (must start with OP)';
|
||||
operatorCodeInput.parentNode.insertBefore(operatorErrorMessage, operatorCodeInput.nextSibling);
|
||||
|
||||
// Create error message element for CP code
|
||||
const cpErrorMessage = document.createElement('div');
|
||||
cpErrorMessage.className = 'error-message';
|
||||
cpErrorMessage.id = 'cp-error';
|
||||
cpErrorMessage.textContent = 'Please scan a valid CP';
|
||||
cpCodeInput.parentNode.insertBefore(cpErrorMessage, cpCodeInput.nextSibling);
|
||||
|
||||
// Create error message element for OC1 code
|
||||
const oc1ErrorMessage = document.createElement('div');
|
||||
oc1ErrorMessage.className = 'error-message';
|
||||
oc1ErrorMessage.id = 'oc1-error';
|
||||
oc1ErrorMessage.textContent = 'Please scan a valid OC (must start with OC)';
|
||||
oc1CodeInput.parentNode.insertBefore(oc1ErrorMessage, oc1CodeInput.nextSibling);
|
||||
|
||||
// Create error message element for OC2 code
|
||||
const oc2ErrorMessage = document.createElement('div');
|
||||
oc2ErrorMessage.className = 'error-message';
|
||||
oc2ErrorMessage.id = 'oc2-error';
|
||||
oc2ErrorMessage.textContent = 'Please scan a valid OC (must start with OC)';
|
||||
oc2CodeInput.parentNode.insertBefore(oc2ErrorMessage, oc2CodeInput.nextSibling);
|
||||
|
||||
// Create error message element for defect code
|
||||
const defectErrorMessage = document.createElement('div');
|
||||
defectErrorMessage.className = 'error-message';
|
||||
defectErrorMessage.id = 'defect-error';
|
||||
defectErrorMessage.textContent = 'Defect code must be a 3-digit number (e.g., 000, 001, 123)';
|
||||
defectCodeInput.parentNode.insertBefore(defectErrorMessage, defectCodeInput.nextSibling);
|
||||
|
||||
// Validate operator code on input
|
||||
operatorCodeInput.addEventListener('input', function() {
|
||||
const value = this.value.toUpperCase();
|
||||
this.value = value;
|
||||
|
||||
if (value.length >= 2 && !value.startsWith('OP')) {
|
||||
operatorErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OP');
|
||||
} else {
|
||||
operatorErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent leaving operator code field if invalid
|
||||
operatorCodeInput.addEventListener('blur', function(e) {
|
||||
if (this.value.length > 0 && !this.value.startsWith('OP')) {
|
||||
operatorErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OP');
|
||||
setTimeout(() => {
|
||||
this.focus();
|
||||
this.select();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent Tab/Enter from moving to next field if operator code is invalid
|
||||
operatorCodeInput.addEventListener('keydown', function(e) {
|
||||
if ((e.key === 'Tab' || e.key === 'Enter') && this.value.length > 0 && !this.value.startsWith('OP')) {
|
||||
e.preventDefault();
|
||||
operatorErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OP');
|
||||
this.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Validate CP code on input
|
||||
cpCodeInput.addEventListener('input', function() {
|
||||
const value = this.value.toUpperCase();
|
||||
this.value = value;
|
||||
|
||||
if (value.length >= 2 && !value.startsWith('CP')) {
|
||||
cpErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with CP');
|
||||
} else {
|
||||
cpErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent leaving CP code field if invalid
|
||||
cpCodeInput.addEventListener('blur', function(e) {
|
||||
if (this.value.length > 0 && !this.value.startsWith('CP')) {
|
||||
cpErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with CP');
|
||||
setTimeout(() => {
|
||||
this.focus();
|
||||
this.select();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent Tab/Enter from moving to next field if CP code is invalid
|
||||
cpCodeInput.addEventListener('keydown', function(e) {
|
||||
if ((e.key === 'Tab' || e.key === 'Enter') && this.value.length > 0 && !this.value.startsWith('CP')) {
|
||||
e.preventDefault();
|
||||
cpErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with CP');
|
||||
this.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent focusing on CP code if operator code is invalid
|
||||
cpCodeInput.addEventListener('focus', function(e) {
|
||||
if (operatorCodeInput.value.length > 0 && !operatorCodeInput.value.startsWith('OP')) {
|
||||
e.preventDefault();
|
||||
operatorErrorMessage.classList.add('show');
|
||||
operatorCodeInput.focus();
|
||||
operatorCodeInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent focusing on OC1 code if CP code is invalid
|
||||
oc1CodeInput.addEventListener('focus', function(e) {
|
||||
if (cpCodeInput.value.length > 0 && !cpCodeInput.value.startsWith('CP')) {
|
||||
e.preventDefault();
|
||||
cpErrorMessage.classList.add('show');
|
||||
cpCodeInput.focus();
|
||||
cpCodeInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Validate OC1 code on input
|
||||
oc1CodeInput.addEventListener('input', function() {
|
||||
const value = this.value.toUpperCase();
|
||||
this.value = value;
|
||||
|
||||
if (value.length >= 2 && !value.startsWith('OC')) {
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
} else {
|
||||
oc1ErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent leaving OC1 code field if invalid
|
||||
oc1CodeInput.addEventListener('blur', function(e) {
|
||||
if (this.value.length > 0 && !this.value.startsWith('OC')) {
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
setTimeout(() => {
|
||||
this.focus();
|
||||
this.select();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent Tab/Enter from moving to next field if OC1 code is invalid
|
||||
oc1CodeInput.addEventListener('keydown', function(e) {
|
||||
if ((e.key === 'Tab' || e.key === 'Enter') && this.value.length > 0 && !this.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
this.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent focusing on OC2 code if CP code is invalid
|
||||
oc2CodeInput.addEventListener('focus', function(e) {
|
||||
if (cpCodeInput.value.length > 0 && !cpCodeInput.value.startsWith('CP')) {
|
||||
e.preventDefault();
|
||||
cpErrorMessage.classList.add('show');
|
||||
cpCodeInput.focus();
|
||||
cpCodeInput.select();
|
||||
}
|
||||
// Also check if OC1 is invalid
|
||||
if (oc1CodeInput.value.length > 0 && !oc1CodeInput.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
oc1CodeInput.focus();
|
||||
oc1CodeInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Validate OC2 code on input
|
||||
oc2CodeInput.addEventListener('input', function() {
|
||||
const value = this.value.toUpperCase();
|
||||
this.value = value;
|
||||
|
||||
if (value.length >= 2 && !value.startsWith('OC')) {
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
} else {
|
||||
oc2ErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent leaving OC2 code field if invalid
|
||||
oc2CodeInput.addEventListener('blur', function(e) {
|
||||
if (this.value.length > 0 && !this.value.startsWith('OC')) {
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
setTimeout(() => {
|
||||
this.focus();
|
||||
this.select();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent Tab/Enter from moving to next field if OC2 code is invalid
|
||||
oc2CodeInput.addEventListener('keydown', function(e) {
|
||||
if ((e.key === 'Tab' || e.key === 'Enter') && this.value.length > 0 && !this.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must start with OC');
|
||||
this.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent focusing on defect code if CP code is invalid
|
||||
defectCodeInput.addEventListener('focus', function(e) {
|
||||
if (cpCodeInput.value.length > 0 && !cpCodeInput.value.startsWith('CP')) {
|
||||
e.preventDefault();
|
||||
cpErrorMessage.classList.add('show');
|
||||
cpCodeInput.focus();
|
||||
cpCodeInput.select();
|
||||
}
|
||||
// Also check if OC1 is invalid
|
||||
if (oc1CodeInput.value.length > 0 && !oc1CodeInput.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
oc1CodeInput.focus();
|
||||
oc1CodeInput.select();
|
||||
}
|
||||
// Also check if OC2 is invalid
|
||||
if (oc2CodeInput.value.length > 0 && !oc2CodeInput.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
oc2CodeInput.focus();
|
||||
oc2CodeInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Validate defect code on input - only allow digits
|
||||
defectCodeInput.addEventListener('input', function() {
|
||||
// Remove any non-digit characters
|
||||
this.value = this.value.replace(/\D/g, '');
|
||||
|
||||
// Validate if it's a valid 3-digit number when length is 3
|
||||
if (this.value.length === 3) {
|
||||
const isValid = /^\d{3}$/.test(this.value);
|
||||
if (!isValid) {
|
||||
defectErrorMessage.classList.add('show');
|
||||
this.setCustomValidity('Must be a 3-digit number');
|
||||
} else {
|
||||
defectErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
} else {
|
||||
defectErrorMessage.classList.remove('show');
|
||||
this.setCustomValidity('');
|
||||
}
|
||||
|
||||
// Auto-submit when 3 characters are entered and all validations pass
|
||||
if (this.value.length === 3) {
|
||||
// Validate operator code before submitting
|
||||
if (!operatorCodeInput.value.startsWith('OP')) {
|
||||
operatorErrorMessage.classList.add('show');
|
||||
operatorCodeInput.focus();
|
||||
operatorCodeInput.setCustomValidity('Must start with OP');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate CP code before submitting
|
||||
if (!cpCodeInput.value.startsWith('CP')) {
|
||||
cpErrorMessage.classList.add('show');
|
||||
cpCodeInput.focus();
|
||||
cpCodeInput.setCustomValidity('Must start with CP');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate OC1 code before submitting
|
||||
if (!oc1CodeInput.value.startsWith('OC')) {
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
oc1CodeInput.focus();
|
||||
oc1CodeInput.setCustomValidity('Must start with OC');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate OC2 code before submitting
|
||||
if (!oc2CodeInput.value.startsWith('OC')) {
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
oc2CodeInput.focus();
|
||||
oc2CodeInput.setCustomValidity('Must start with OC');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate defect code is a valid 3-digit number
|
||||
const isValidDefectCode = /^\d{3}$/.test(this.value);
|
||||
if (!isValidDefectCode) {
|
||||
defectErrorMessage.classList.add('show');
|
||||
this.focus();
|
||||
this.setCustomValidity('Must be a 3-digit number');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update time field before submitting
|
||||
const timeInput = document.getElementById('time');
|
||||
const now = new Date();
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
timeInput.value = `${hours}:${minutes}:${seconds}`;
|
||||
|
||||
// Submit the form
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Validate form on submit
|
||||
form.addEventListener('submit', function(e) {
|
||||
let hasError = false;
|
||||
|
||||
if (!operatorCodeInput.value.startsWith('OP')) {
|
||||
e.preventDefault();
|
||||
operatorErrorMessage.classList.add('show');
|
||||
operatorCodeInput.setCustomValidity('Must start with OP');
|
||||
if (!hasError) {
|
||||
operatorCodeInput.focus();
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!cpCodeInput.value.startsWith('CP')) {
|
||||
e.preventDefault();
|
||||
cpErrorMessage.classList.add('show');
|
||||
cpCodeInput.setCustomValidity('Must start with CP');
|
||||
if (!hasError) {
|
||||
cpCodeInput.focus();
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!oc1CodeInput.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc1ErrorMessage.classList.add('show');
|
||||
oc1CodeInput.setCustomValidity('Must start with OC');
|
||||
if (!hasError) {
|
||||
oc1CodeInput.focus();
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!oc2CodeInput.value.startsWith('OC')) {
|
||||
e.preventDefault();
|
||||
oc2ErrorMessage.classList.add('show');
|
||||
oc2CodeInput.setCustomValidity('Must start with OC');
|
||||
if (!hasError) {
|
||||
oc2CodeInput.focus();
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Validate defect code is a 3-digit number
|
||||
const isValidDefectCode = /^\d{3}$/.test(defectCodeInput.value);
|
||||
if (!isValidDefectCode) {
|
||||
e.preventDefault();
|
||||
defectErrorMessage.classList.add('show');
|
||||
defectCodeInput.setCustomValidity('Must be a 3-digit number');
|
||||
if (!hasError) {
|
||||
defectCodeInput.focus();
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="scan-container">
|
||||
|
||||
Reference in New Issue
Block a user