Validación de un formulario sin usar un botón y cambiar la clase TD -- javascript campo con php campo con html5 camp codereview Relacionados El problema

Validating a form without using a button and changing td class


4
vote

problema

Español

Necesito validar el formulario dentro de una tabla y cambiar la clase de un 99887776655443311 99887766555443312 script.

He escrito este código, pero ¿hay una manera de hacer esto de una manera más sencilla?

He escrito muchas páginas con código como este.

  HtmlAgilityPack3  

Después de las sugerencias, hago muchas modificaciones en el código original.

Código de revisión:

  HtmlAgilityPack4  
Original en ingles

I need to validate the form inside a table and change the class of a td-element when the value is not set. I don't have a button inside a form and I can't use the jQuery validate script.

I have written this code but is there a way to do this in a simpler way?

I have written many pages with code like this.

<script> function richiesti() {      var dati=0;     var cognome=document.clienti.cognome.value;     if ( cognome != '' ){ dati++; } else { document.clienti.cognome.focus(); }       var nome=document.clienti.nome.value;     if ( nome != '' ){ dati++; } else { document.clienti.nome.focus(); }       var codfisc=document.clienti.codfisc.value;     if ( codfisc != '' ){ dati++; } else { document.clienti.codfisc.focus(); }        if ( dati == 3 ){       // Se i tre valori richiesti sono inseriti controllo il codice fiscale      // Definisco un pattern per il confronto     var pattern = /^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$/;      // creo una variabile per richiamare con facilitxc3xa0 il nostro campo di input     var CodiceFiscale = document.getElementById("codfisc");      // utilizzo il metodo search per verificare che il valore inserito nel campo     // di input rispetti la stringa di verifica (pattern)     if (CodiceFiscale.value.search(pattern) == -1)     {     // In caso di errore stampo un avviso e pulisco il campo...     alert("Il valore inserito non xc3xa8 un codice fiscale!");     CodiceFiscale.value = "";     CodiceFiscale.focus();     }     else { document.clienti.submit() ;  }      }     else { alert('Cognome, Nome e Codice fiscale sono campi obbligatori.');     if ( cognome == '' && nome == '' && codfisc == '' ){      // Cambio la classe del td al valore mancante     document.getElementById('tdcognome').className="tdorange c_white b";     // Imposto la classe degli altri td nel caso sia stata cambiata     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdocra c_white b";     document.getElementById('cognome').value="richiesto";     document.clienti.cognome.focus(); }      if ( cognome == '' && nome != '' && codfisc != '' ){      document.getElementById('tdcognome').className="tdorange c_white b";     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdocra c_white b";     document.getElementById('cognome').value="richiesto";     document.clienti.cognome.focus(); }     if ( cognome == '' && nome == '' && codfisc != '' ){     document.getElementById('tdcognome').className="tdorange c_white b";     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdocra c_white b";     document.getElementById('cognome').value="richiesto";        document.clienti.cognome.focus(); }     if ( cognome == '' && nome != '' && codfisc == '' ){     document.getElementById('tdcognome').className="tdorange c_white b";     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdocra c_white b";     document.getElementById('cognome').value="richiesto";     document.clienti.cognome.focus(); }     if ( cognome != '' && nome == '' && codfisc != '' ){     document.getElementById('tdcognome').className="tdocra c_white b";     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdorange c_white b";     document.getElementById('nome').value="richiesto";     document.clienti.nome.focus(); }     if ( cognome != '' && nome == '' && codfisc == '' ){     document.getElementById('tdcognome').className="tdocra c_white b";     document.getElementById('tdcodfisc').className="tdocra c_white b";     document.getElementById('tdnome').className="tdorange c_white b";     document.getElementById('nome').value="richiesto";     document.clienti.nome.focus(); }      if ( cognome != '' && nome != '' && codfisc == '' ){     document.getElementById('tdcognome').className="tdocra c_white b";     document.getElementById('tdnome').className="tdocra c_white b";     document.getElementById('tdcodfisc').className="tdorange c_white b";     document.getElementById('codfisc').value="richiesto";     document.clienti.codfisc.focus(); }     }     }    </script>   <HTML> <form name="clienti" id="clienti" method="POST" action="<?php echo $editFormAction; ?>"> <table class="half" >    <tr>    <td id="tdcognome" class="tdocra c_white  b">Cognome :</td>    <td><input name="cognome" id="cognome" type="text" class=" text-sx" value=""  required></td>    <td id="tdnome" class="tdocra c_white  b">Nome :</td>    <td><input name="nome" id="nome" type="text" class="text-sx" value="" required></td>    <td id="tdcodfisc" class="tdocra c_white  b">Codice Fiscale :</td>    <td><input name="codfisc" id="codfisc" type="text" class="text-sx" value="" required></td>    </tr>    <tr>    <td colspan="6"><a class="btn-orange" onClick="richiesti();" href="#">memorizza dati</a></td>            </tr>    </table>    </form> </HTML> 

After the suggestions i make many modify at original code.

REVIEW CODE :

<script> function richiesti() { //open function richiesti      var dati=0;     var cognome=document.clienti.cognome;     var nome=document.clienti.nome;     var codfisc=document.clienti.codfisc;      [cognome, nome, codfisc].forEach(function (field) { // open function field        if (field.value != ''){ // open if value             dati++;             } // close if value        else { // open else value             field.focus();        } // close else value     }); // close function field      if ( dati == 3 ){  // open if dati         var pattern = /^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$/;         var codiceFiscale = document.getElementById("codfisc");          if (codiceFiscale.value.search(pattern) == -1) { // open if codiceFiscale             alert("Il valore inserito non xc3xa8 un codice fiscale!");             codiceFiscale.value = "";             codiceFiscale.focus();         } // close if codiceFiscale         else { // open else codiceFiscale              document.clienti.submit() ;         } // close else codiceFiscale     } // close if dati       else { // open else dati         alert('Cognome, Nome e Codice fiscale sono campi obbligatori.');          if (cognome.value == '') { // open if cognome             document.getElementById('tdcognome').className = "tdorange c_white b";             document.getElementById('tdcodfisc').className = "tdocra c_white b";              document.getElementById('tdnome'   ).className = "tdocra c_white b";             document.getElementById('cognome').value = "richiesto";             cognome.focus();         } // close if cognome         else { // open else cognome             document.getElementById('tdcognome').className="tdocra c_white b";                 if (nome.value == '') { // open if nome                     document.getElementById('tdcodfisc').className = "tdocra c_white b";                     document.getElementById('tdnome'   ).className = "tdorange c_white b";                     document.getElementById('nome').value = "richiesto";                     nome.focus();                 } // close if nome                 else { // open else nome                     if (codfisc.value == '' ) { // open if codfisc                         document.getElementById('tdnome'   ).className = "tdocra c_white b";                         document.getElementById('tdcodfisc').className = "tdorange c_white b";                         document.getElementById('codfisc').value = "richiesto";                         codfisc.focus();                     } // close if codfisc                 } // close else nome         } // close else cognome      } // close else dati     } // close function richiesti  </script> 
        

Lista de respuestas

4
 
vote
vote
La mejor respuesta
 

Hablemos de esta parte:

  var cognome=document.clienti.cognome.value; if ( cognome != '' ){ dati++; } else { document.clienti.cognome.focus(); }   

En primer lugar, la sangría es horrible. Podemos hacer sin llaves

  if (cognome != '') dati++; else               document.clienti.cognome.focus();   

o preferiblemente, coloque ese condicional en múltiples líneas.

  if (cognome != ''){     dati++; } else {     document.clienti.cognome.focus(); }   

Ahora, usa ambos document.clienti.cognome.value y document.clienti.cognome.focus . Sería mejor asignar document.clienti.cognome a alguna variable, entonces:

  var cognome = document.clienti.cognome; if (cognome.value != ''){     dati++; } else {     cognome.focus(); }   

Esto nos permite eliminar la repetición en bucle durante algunos valores:

  var cognome = document.clienti.cognome;  var nome    = document.clienti.nome; var codfisc = document.clienti.codfisc;  [cognome, nome, codfisc].forEach(function (field) {     if (field.value != ''){         dati++;     } else {         field.focus();     } });   

Posteriormente, prueba las diversas combinaciones de campos que están siendo poblados y asignan clases dependiendo de estas combinaciones. El problema es que las clases no siempre dependen de todos los campos, por lo que podríamos simplificar esa secuencia masiva de if S:

  if (cognome.value == '') {     document.getElementById('tdcognome').className = "tdorange c_white b";     document.getElementById('tdcodfisc').className = "tdocra c_white b";      document.getElementById('tdnome'   ).className = "tdocra c_white b";     document.getElementById('cognome').value = "richiesto";     cognome.focus(); } else {     document.getElementById('tdcognome').className="tdocra c_white b";     if (nome.value == '') {         document.getElementById('tdcodfisc').className = "tdocra c_white b";         document.getElementById('tdnome'   ).className = "tdorange c_white b";         document.getElementById('nome').value = "richiesto";         nome.focus();     }     else {         if (codfisc.value == '' ) {             document.getElementById('tdnome'   ).className = "tdocra c_white b";             document.getElementById('tdcodfisc').className = "tdorange c_white b";             document.getElementById('codfisc').value = "richiesto";             codfisc.focus();         }     } }   

Oh, el cuerpo es siempre el mismo si if (cognome != '') dati++; else document.clienti.cognome.focus(); 0 ! Debido a que ahora limpiamos las condiciones, también podemos ver que se han perdido algunos casos: ¿Qué sucede si if (cognome != '') dati++; else document.clienti.cognome.focus(); 1 ? En los casos como este, sería útil escribir un comentario que explique que no se cambiarán las clases.


Hay algunos comentarios más que se harán en su estilo:

  • Evite los comentarios no ingleses y los nombres de variables. Tuve dificultades para entender su código porque no hablo italiano. El inglés es hablado por prácticamente todos los programadores, por lo que es una mejor opción para el código mantenible.

  • Parece que su sangría se ha metido copiando el código aquí. Sin embargo, hay una cosa muy mala:

      if (cognome != '') dati++; else               document.clienti.cognome.focus(); 2  

    Coloque el cierre de la abrazadera rizada en una línea de su propiedad, esto hace que sea más fácil ver.

  • Tiene una variable que es mayúscula: if (cognome != '') dati++; else document.clienti.cognome.focus(); 3 . Se adhieren a un esquema de nombres consistente, preferiblemente if (cognome != '') dati++; else document.clienti.cognome.focus(); 4 .

  • Su código podría volverse mucho más corto mediante el uso de jQuery. Es un estándar de facto, y ayuda a abstraer sobre muchos problemas de compatibilidad.

  • USO if (cognome != '') dati++; else document.clienti.cognome.focus(); 5 En lugar de if (cognome != '') dati++; else document.clienti.cognome.focus(); 6 se cima, ya que 99887766655443317 intenta cobarde para coincidir los valores a algún tipo de Mathching. Dependiendo de lo que intentas hacer, esto es realmente preferible, pero la mayoría de las veces es un olor a código. El if (cognome != '') dati++; else document.clienti.cognome.focus(); 8 Operador afirma primero que ambos valores son del mismo tipo.

 

Let's talk about this part:

var cognome=document.clienti.cognome.value; if ( cognome != '' ){ dati++; } else { document.clienti.cognome.focus(); } 

First of all, the indentation is awful. We can either do without braces

if (cognome != '') dati++; else               document.clienti.cognome.focus(); 

or preferably, put that conditional onto multiple lines.

if (cognome != ''){     dati++; } else {     document.clienti.cognome.focus(); } 

Now, you use both document.clienti.cognome.value and document.clienti.cognome.focus. It would be better to assign document.clienti.cognome to some variable, then:

var cognome = document.clienti.cognome; if (cognome.value != ''){     dati++; } else {     cognome.focus(); } 

This allows us to remove repetition by looping over some values:

var cognome = document.clienti.cognome;  var nome    = document.clienti.nome; var codfisc = document.clienti.codfisc;  [cognome, nome, codfisc].forEach(function (field) {     if (field.value != ''){         dati++;     } else {         field.focus();     } }); 

Later, you test for various combinations of fields being populated and assign classes depending on these combinations. The problem is that the classes do not always depend on all fields, so we could simplify that massive sequence of ifs:

if (cognome.value == '') {     document.getElementById('tdcognome').className = "tdorange c_white b";     document.getElementById('tdcodfisc').className = "tdocra c_white b";      document.getElementById('tdnome'   ).className = "tdocra c_white b";     document.getElementById('cognome').value = "richiesto";     cognome.focus(); } else {     document.getElementById('tdcognome').className="tdocra c_white b";     if (nome.value == '') {         document.getElementById('tdcodfisc').className = "tdocra c_white b";         document.getElementById('tdnome'   ).className = "tdorange c_white b";         document.getElementById('nome').value = "richiesto";         nome.focus();     }     else {         if (codfisc.value == '' ) {             document.getElementById('tdnome'   ).className = "tdocra c_white b";             document.getElementById('tdcodfisc').className = "tdorange c_white b";             document.getElementById('codfisc').value = "richiesto";             codfisc.focus();         }     } } 

Oh look, the body is always the same if cognome == ''! Because we now cleaned up the conditions, we can also see that some cases have been missed: what happens if cognome != '' && nome != '' && codfisc != ''? In cases like this it would be helpful to write a comment explaining that no classes will be changed.


There are a few more comments to be made on your style:

  • Avoid non-English comments and variable names. I had difficulty understanding your code because I do not speak Italian. English is spoken by virtually all programmers, so it's a better choice for maintainable code.

  • It seems your indentation has been messed up by copying the code here. However, there are one very bad thing:

    if (cond) {   statement;   last_statement } 

    Place the closing curly brace on a line of it's own, this makes it easier to see.

  • You have one variable that's uppercase: CodiceFiscale. Stick to a consistent naming scheme, preferably camelCase.

  • Your code could become much shorter by using jQuery. It's a de-facto standard, and helps abstracting over many compatibility issues.

  • Using == instead of === is usually frowned upon, as == tries to coerce the values to some mathching type. Depending on what you're trying to do, this is actually preferable, but most of the time it's a code smell. The === operator first asserts that both values are of the same type.

 
 
3
 
vote

Aquí hay algunos consejos menores de refactorización. Debe poner esta función en una clase / objeto, si está repitiendo su código. Y luego importe el archivo a cada página HTML que requiera esta validación.

No debe verificar si la variable está vacía de esta manera

  if (cognome != '') dati++; else               document.clienti.cognome.focus(); 9  

La mejor manera es la siguiente:

  if (cognome != ''){     dati++; } else {     document.clienti.cognome.focus(); } 0  

También podría moverse lo siguiente a su propia función if (cognome != ''){ dati++; } else { document.clienti.cognome.focus(); } 1

Por ejemplo:

  if (cognome != ''){     dati++; } else {     document.clienti.cognome.focus(); } 2  

entonces puedes llamarlo.

  if (cognome != ''){     dati++; } else {     document.clienti.cognome.focus(); } 3  
 

Here are some minor refactoring tips. You should put this function into a class/object, if you are repeating your code. And then import the file onto each html page that requires this validation.

You shouldn't check if the variable is empty this way

if ( cognome != '') {     //code goes here } 

The better way is the following:

// this way checks to see if the variable is null and/or empty if (congnome) { //code goes here } 

You could also move the following into its own function document.getElementById('tdnome').className="tdocra c_white b";

For example:

function changeClassName(elementId, newClassValue) {    if (elementId)    {        document.getElementById(elementId).class = newValue;    } } 

Then you can just call it.

changeClassName('tdnome', '"tdocra c_white b'); 
 
 
 
 

Relacionados problema

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

2  Actualizar HTML4 a nuevos elementos semánticos / estructurales HTML5  ( Update html4 to new html5 semantic structural elements ) 
Estoy tratando de actualizar el código de mi sitio web a los elementos semánticos y estructurales de HTML5, pero no estoy muy seguro con el 9988776665544330 ...

4  Este plano ya se ha convertido en un desastre, sugerir una reestructuración  ( This blueprint has already become a mess please suggest some restructuring ) 
Estoy particularmente preocupado por dónde he declarado las funciones, ¿puedo moverlas para limpiar el código sin romper nada? La función "conjugado" contiene...

0  Formulario de sintaxis PDO  ( Syntax form pdo ) 
Pudo ejecutar el formulario para actualizar los datos del perfil de usuario, por el momento está en una versión aproximada, pero sé que se puede mejorar. Pu...

5  CSS Mask Clipping y superposición SVG para lograr un efecto dos  ( Css mask clipping and overlay svg to achieve a two effect ) 
Actualmente estoy tratando de crear una superposición / enmascaramiento de dos SVG como la imagen a continuación: He creado un SVG para la superposición....

5  Html + css weblog  ( Html css weblog ) 
Lo que tengo es un simple weblog que consiste en HTML y CSS. Me gustaría que hubiera identificado errores (código de maloliente y así sucesivamente) y cómo me...

3  Animación de lona de JavaScript que desaceleran y acaparando a la memoria  ( Javascript canvas animation slowing down and hogging memory ) 
Estoy experimentando con las formas móviles en JavaScript con una etiqueta using System; using System.Diagnostics; using System.ServiceProcess; using System....

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...

10  "Stardust" Simulador 2D Gravity - Seguimiento 1: Los planetas  ( Stardust 2d gravity simulator follow up 1 the planets ) 
Este es un seguimiento para el juego de gravedad del simulador 2D pregunta. Desde entonces, he desarrollado mis habilidades de JavaScript, y ahora esto...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos