I'm currently developing a project and facing challenges in implementing input validation for a form. My goal is to ensure that the form only gets submitted and redirects to a specific URL if all requirements are met. To achieve this, I am utilizing Javascript for validation checks. Despite having no apparent errors in the console, when I attempt to submit the form with empty fields, it proceeds without any hindrance.
// Form Controls
const form = document.getElementById('form');
const username = document.getElementById('username');
const room = document.getElementById('room');
// Display input error message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
// Show Success outline
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
// Validate required fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Retrieve fieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Event Listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([username]);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>;
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../static/style.css" rel="stylesheet">
<title>ChatR</title>
<script src="{{ url_for('static', filename='scripts.js') }}"></script>
</head>
<body>
<div class="container-head">
<div class="header">
<h1>MyApp</h1>
</div>
</div>
<div class="container">
<form action="{{url_for('chat') }}" class="form" id="form" method="POST">
<div class="form-control">
<input type="username" id="username" name="username" placeholder="Enter username">
<small>Error Message</small>
</div>
<div class="form-control">
<input type="room" id="room" name="room" placeholder="Enter room">
<small>Error Message</small>
</div>
<button type="submit" class="btn btn-big">Start Chat</button>
</form>
</div>
</body>
</html>New Code that works:
// Validate required fields
function checkRequired(inputArr) {
var success = true;
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
success = false;
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
return success;
}
// Check input length
function checkLength(input, min, max) {
var success = true;
if(input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
console.log(input);
success = false;
} else if(input.value.length > max) {
showError(input, `${getFieldName(input)} must be less than ${max} characters`);
success = false;
} else {
showSuccess(input);
}
return success;
}
// Retrieve fieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Event Listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
if(checkRequired([username, room]) && checkLength(username, 3, 15)){
form.submit();
}
});