Estoy creando un formulario simple con validación con html razor y javascript. Una validación que tengo es comprobar si hay campos vacíos.

Resultado Esperado:
Mensaje de error que se mostrará (debajo del campo de entrada) si el usuario hace clic en el botón Enviar sin ingresar ningún valor en el campo de entrada.

Resultado actual:
No se muestra ningún mensaje de error incluso si el usuario hace clic en el botón Enviar sin ingresar ningún valor en el campo de entrada. Parece que el archivo html no se comunica en absoluto con el archivo JS. Intenté varias formas, como borrar el caché del navegador y buscar errores tipográficos, pero fue en vano.

Aquí están los códigos relevantes:

formulario.cshtml

 @* Display error message *@ <div id="error"></div> <form id ="form"> <div class="form-group"> <label for="deviceId">Device ID</label> <input type="text" class="form-control" id="deviceId" placeholder="Enter Device Device ID"> </div> @* Energy Usage *@ <div class="form-group"> <label for="energyUsage">Energy Usage</label> <input type="number" class="form-control" id="energyUsage" placeholder="Enter Energy Usage"> </div> <button onclick="performValidation()" type="submit">Submit</button> </form> @section Scripts { <script src="js/validation.js"></script> }

validación.js

 const deviceId = document.getElementById('deviceId') const energyUsage = document.getElementById('energyUsage') const form = document.getElementById('form') const errorElement = document.getElementById('error') function performValidation() { form.addEventListener('submit', (e) => { // list to store the error messages let messages = [] // if device ID field is an empty string or user did not pass in any device Id if (deviceId.value === ' ' || deviceId.value == null) { // send the error message messages.push('Device ID is required') // console.log('No Device ID retrieved') } // if there is error, prevent the form from submitting if (messages.length > 0) { e.preventDefault() // check errorElement errorElement.innerText = messages.join(', ') // to separate error elements from each other } }) }