Assim como o Caique comentou, você pode, com JavaScript, adicionar a propriedade disabled
no momento que o formulário é submetido, assim o navegador não incluirá os campos em branco:
const form = document.getElementById("form");
form.addEventListener("submit", function(event) {
for (let input of this.elements) {
if (!input.value) {
input.setAttribute("disabled", true);
}
}
});
O mesmo acontece se definir a propriedade name
para nulo:
form.addEventListener("submit", function(event) {
for (let input of this.elements) {
if (!input.value) {
input.setAttribute("name", "");
}
}
});
Comentários sobre o código
Através do document.getElementById
conseguimos obter a referência em JS do formulário no DOM, ou seja, form
será o formulário que desejamos trabalhar - perceba que para isso será ncessário definir o atributo id
no mesmo. Após, utilizando addEventListener
, adicionamos uma função que sempre será executada quando o evento submit
do formulário for disparado, isto é, quando o formulário for submetido - na verdade o evento submit
é executado imediatamente antes da submissão efetiva do formulário pelo navegador. Nesta função, então, percorremos todos os elementos (campos) do formulário em questão através de um laço de repetição for
, iterando sobre this.elements
. O this
, neste caso, faz referência ao objeto form
. Assim, input
será a referência a cada campo do formulário, então verificamos se o respectivo valor input.value
é válido e, quando não for, definimos a propriedade disabled
como verdadeira do mesmo. Um campo com a propriedade disabled
definida é ignorado pelo navegador quando o formulário é submetido, por esse motivo que os campos em branco não são enviados.