Problemas e soluções encontrados no uso de entradas obrigatórias em HTML5

Erro ao ocultar a entrada ao enviar o formulário

Quando o formulário é enviado, algumas tags de entrada ficam ocultas e o erro An invalid form control with name='' is not focusable aparecerá durante o processo de verificação do formulário.

Embora o problema que encontrei seja que minha tag de entrada não tem nenhum atributo obrigatório, mas antes de a tag ser ocultada (usei a barra de guias para alternar), digitei o formato errado e depois o escondi, neste momento estava realmente errado. Também será verificado pelo formulário, mas por estar oculto, o navegador reportará um erro caso não consiga obter o foco.

Basta definir o valor da entrada como vazio antes de ocultá-la. Minha entrada não usa o atributo obrigatório.

Este erro também ocorrerá se a entrada contiver atributos display:none e obrigatórios.

O Chrome deseja se concentrar nos controles que são necessários, mas ainda estão vazios para que possa aparecer a mensagem Preencha este campo. No entanto, se o controle estiver oculto quando o Chrome quiser exibir a mensagem, ou seja, quando o formulário for enviado, o Chrome não poderá focar no controle porque ele está oculto, portanto o formulário não será enviado.

1. Ao ocultar, exclua o atributo obrigatório

 selector.removeAttribute (obrigatório)

2. Se necessário não for usado, isso pode ser causado pelo tipo de botão não estar definido. Definir <button type=button>

3. O formulário não é verificado, ou seja, o atributo novalidate é adicionado. (Não é a solução final ）<form novalidate></form>

4. Como é causado pelo uso de display:none, a mesma visibilidade:hidden também causará problemas, então não use. Você pode definir a opacidade do estilo CSS: 0;

5. Desative este controle de formulário. desativado Isso ocorre porque geralmente se você oculta um controle de formulário é porque não se importa com seu valor. Portanto, este par de valores de nome de controle de formulário não será enviado quando o formulário for enviado.

 $(body).on(submit, .myForm, function(evt) {// Desativa coisas que não queremos validar.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Se a validação HTML5 estiver disponível, deixe-a ser executada. Caso contrário, evite default.if (this.el.checkValidity && !this.el.checkValidity()) { // Reative coisas que desabilitamos anteriormente $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); return true;}evt.preventDefault();// Reative coisas que nós desabilitamos anteriormente.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Qualquer outro material de processamento de formulário vai aqui.});

Acima estão os problemas e soluções encontrados no uso da entrada obrigatória de h5 introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!