Validación simple de JS para dos formularios de contacto -- javascript campo con validation campo con form camp codereview Relacionados El problema

Simple JS validation for two contact forms


1
vote

problema

Español

No soy un profesional en JS, ¡mi código es un desastre (pero está funcionando!). Me gustaría pedirle ayuda para reducir algunos redundancias en dos casos. Esos dos son códigos están afectando estas dos formas:

  <form action="contact.php" method="post" name="form1" onsubmit="return validateForm1()">     <input type="text" name="name" id="inputName1" placeholder="Name">     <input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">     <input type="text" name="address" id="inputAdr1" placeholder="Address">     <input type="text" name="topic" id="inputTop1" placeholder="Topic">     <input type="email" name="email" id="inputMail1" placeholder="E-mail">     <input type="email" id="inputConfirmMail1" onblur="mailConfirm1()" placeholder="Confirm E-mail">     <input type="submit" value="Send"> </form>  <form action="contact.php" method="post" name="form2" onsubmit="return validateForm2()">     <input type="text" name="name" id="inputName2" placeholder="Name">     <input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">     <input type="text" name="address" id="inputAdr2" placeholder="Address">     <input type="text" name="topic" id="inputTop2" placeholder="Topic">     <input type="email" name="email" id="inputMail2" placeholder="E-mail">     <input type="email" id="inputConfirmMail2" onblur="mailConfirm2()" placeholder="Confirm E-mail">     <input type="submit" value="Send"> </form>   

primero (una función para evitar que mis dos formularios tengan entradas vacías antes de enviar)

  function validateForm1() {     var c = document.forms["form1"]["name"].value;     var d = document.forms["form1"]["tel"].value;     var e = document.forms["form1"]["address"].value;     var f = document.forms["form1"]["topic"].value;     var g = document.forms["form1"]["email"].value;     if (c == null || c == "") {             alert("insert your name");             return false;         }         else if (d == null || d == "") {             alert("insert your telephone");             return false;         }         else if (e == null || e == "") {             alert("insert your address");             return false;         }         else if (f == null || f == "") {             alert("insert a topic");             return false;         }         else if (g == null || g == "") {             alert("insert your email");             return false;         }     }     function validateForm2() {         var c = document.forms["form2"]["name"].value;         var d = document.forms["form2"]["tel"].value;         var e = document.forms["form2"]["address"].value;         var f = document.forms["form2"]["topic"].value;         var g = document.forms["form2"]["email"].value;         if (c == null || c == "") {             alert("insert your name");             return false;         }         else if (d == null || d == "") {             alert("insert your telephone");             return false;         }         else if (e == null || e == "") {             alert("insert your address");             return false;         }         else if (f == null || f == "") {             alert("insert a topic");             return false;         }         else if (g == null || g == "") {             alert("insert your email");             return false;         }     }   

segundo (Tengo un área de confirmación de su correo electrónico "en mi formulario, así que hice esta función para asegurarme de que el usuario ingresa el mismo valor en ambas áreas)

  function mailConfirm1() {     var mail1 = document.getElementById("inputMail1").value;     var conMail1 = document.getElementById("inputConfirmMail1").value;     if(mail1 != conMail1) {         alert('both emails are not the same');     } } function mailConfirm2() {     var mail2 = document.getElementById("inputMail2").value;     var conMail2 = document.getElementById("inputConfirmMail2").value;     if(mail2 != conMail2) {         alert('both emails are not the same');     } }   
Original en ingles

I'm not a pro in js so, my code is a mess (but it's working!). I would like to ask your help to reduce some redundancies in two cases. Those two are codes are affecting these two forms:

<form action="contact.php" method="post" name="form1" onsubmit="return validateForm1()">     <input type="text" name="name" id="inputName1" placeholder="Name">     <input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">     <input type="text" name="address" id="inputAdr1" placeholder="Address">     <input type="text" name="topic" id="inputTop1" placeholder="Topic">     <input type="email" name="email" id="inputMail1" placeholder="E-mail">     <input type="email" id="inputConfirmMail1" onblur="mailConfirm1()" placeholder="Confirm E-mail">     <input type="submit" value="Send"> </form>  <form action="contact.php" method="post" name="form2" onsubmit="return validateForm2()">     <input type="text" name="name" id="inputName2" placeholder="Name">     <input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">     <input type="text" name="address" id="inputAdr2" placeholder="Address">     <input type="text" name="topic" id="inputTop2" placeholder="Topic">     <input type="email" name="email" id="inputMail2" placeholder="E-mail">     <input type="email" id="inputConfirmMail2" onblur="mailConfirm2()" placeholder="Confirm E-mail">     <input type="submit" value="Send"> </form> 

FIRST (a function to prevent my two forms to have empty inputs before submission)

function validateForm1() {     var c = document.forms["form1"]["name"].value;     var d = document.forms["form1"]["tel"].value;     var e = document.forms["form1"]["address"].value;     var f = document.forms["form1"]["topic"].value;     var g = document.forms["form1"]["email"].value;     if (c == null || c == "") {             alert("insert your name");             return false;         }         else if (d == null || d == "") {             alert("insert your telephone");             return false;         }         else if (e == null || e == "") {             alert("insert your address");             return false;         }         else if (f == null || f == "") {             alert("insert a topic");             return false;         }         else if (g == null || g == "") {             alert("insert your email");             return false;         }     }     function validateForm2() {         var c = document.forms["form2"]["name"].value;         var d = document.forms["form2"]["tel"].value;         var e = document.forms["form2"]["address"].value;         var f = document.forms["form2"]["topic"].value;         var g = document.forms["form2"]["email"].value;         if (c == null || c == "") {             alert("insert your name");             return false;         }         else if (d == null || d == "") {             alert("insert your telephone");             return false;         }         else if (e == null || e == "") {             alert("insert your address");             return false;         }         else if (f == null || f == "") {             alert("insert a topic");             return false;         }         else if (g == null || g == "") {             alert("insert your email");             return false;         }     } 

SECOND (I have a "confirm your email" area in my form so I did this function to make sure the user inputs the same value in both areas)

function mailConfirm1() {     var mail1 = document.getElementById("inputMail1").value;     var conMail1 = document.getElementById("inputConfirmMail1").value;     if(mail1 != conMail1) {         alert('both emails are not the same');     } } function mailConfirm2() {     var mail2 = document.getElementById("inputMail2").value;     var conMail2 = document.getElementById("inputConfirmMail2").value;     if(mail2 != conMail2) {         alert('both emails are not the same');     } } 
        
   
   

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Dos cosas generales:

Evite los nombres variables que consisten en un solo carácter.

Lo que quiero decir es: incluso algo como 'telvalue' es mejor que 'D'. Todavía no es bonita, pero al menos uno tiene una idea de lo que se entiende.

Debes preocuparse por los conflictos de nombres.

No le haría ningún daño para adjuntar las funciones a un objeto global. O para usar una expresión de función invocada inmediatamente.

Ejemplos aquí: https://addyosmani.com/blog/essential-js-namespacing/

sobre el problema de la redundancia:

Usted podría atributos de datos y nombres de clase. Luego, utilizando las funciones de iteración en JavaScript.

Ejemplo Lo que quiero decir aquí:

  operator>>4  
  operator>>5  
 

Two general things:

Avoid variable-names which consist of just one character.

What I mean is: Even something like 'telValue' is better then 'd'. Still not pretty but at least one get an idea what is meant.

You should care about name conflicts.

It would do no harm to attach the functions on to a global object. Or to use a Immediately Invoked Function Expression.

Examples here: https://addyosmani.com/blog/essential-js-namespacing/

Concerning the redundancy issue:

You could data-attributes and class-names. Then using iteration-functions in JavaScript.

Example what I mean here:

(function() {   document.querySelector('.user-data').addEventListener('submit', function(e) {     e.preventDefault();      validateForm(this);   });    function validateForm(formElement) {     var inputs = formElement.querySelectorAll('.not-empty');     var valid = true;      inputs = Array.prototype.slice.call(inputs);      inputs.forEach(function(inputElement) {        if (!inputElement.value.length) {         let message = inputElement.dataset.subject || ' the demanded value';          alert("Please insert " + message + '.');          if (valid) {           valid = !valid;         }       }     });      if (valid) {       formElement.submit();     }           } })();
<div class="wrap">   <form class="user-data" action="contact.php" method="post" name="form1" >     <input class="not-empty" data-subject="your name" type="text" name="name" id="inputName1" placeholder="Name">     <input class="not-empty" data-subject="your telephone" type="text" name="tel" id="inputTel1" placeholder="Telephone Number">     <input class="not-empty" data-subject="your address" type="text" name="address" id="inputAdr1" placeholder="Address">     <input class="not-empty" data-subject="a topic" type="text" name="topic" id="inputTop1" placeholder="Topic">     <input class="not-empty" data-subject="your email" type="email" name="email" id="inputMail1" placeholder="E-mail">     <input class="not-empty" type="email" id="inputConfirmMail1" placeholder="Confirm E-mail">     <input type="submit" value="Send">   </form> </div>
 
 
   
   
2
 
vote

La forma más sencilla de minimizar su código es cambiar las funciones que ha escrito para aceptar parámetros.

html:

  operator>>6  

js:

  operator>>7  

Sin embargo, esto no le impide enviar el formulario con ambas direcciones de correo electrónico diferentes o nunca haber ingresado al correo electrónico de confirmación.

Además, la mano que escribe cada regla de validación para cada entrada individual sería mucho tiempo consumidor y propenso a los errores de las lógicas de negocios.

Le recomendaría encarecidamente que use un validador de código abierto para ayudar a perejil o validador de bootstrap

 

The simplest way to minimise your code is to change the functions you've written to accept parameters.

HTML:

<form action="contact.php" method="post" name="form1"      onsubmit="return validateForm(this)"> ... <input type="email" name="conEmail" id="inputConfirmMail1"      onblur="mailConfirm(this, 'inputMail1')" placeholder="Confirm E-mail"> 

JS:

function validateForm(form) {   var c = form.name.value;   var d = form.tel.value;   var e = form.address.value;   var f = form.topic.value;   var g = form.email.value;    if (!c) {      alert("insert your name");      return false;   }   else if (!d) {      alert("insert your telephone");      return false;   }   else if (!e) {      alert("insert your address");      return false;   }   else if (!f) {      alert("insert a topic");      return false;   }   else if (!g) {      alert("insert your email");      return false;   } }  function mailConfirm(input, target) {   var mail = document.getElementById(target).value;   var conMail = this.value;   if(mail != conMail) {      alert('both emails are not the same');   } } 

However this doesn't stop you from submitting the form with both email addresses being different or having never entered the confirmation email.

Also, hand writing out every single validation rule for each individual input would be very time consuming and prone to business logic errors.

I would highly recommend you use an open source validator to assist like Parsley or Bootstrap Validator

 
 
 
 

Relacionados problema

2  Formulario de clases de clase y clases infantiles  ( Form validator class and child classes ) 
Estoy creando una clase de formulario para validar los datos del formulario, y quisiera algunos consejos sobre cómo refactorizarlo por las mejores prácticas. ...

2  Usando jQuery para configurar la clase de un elemento correspondiente al botón de radio seleccionado  ( Using jquery to set the class of an element corresponding to the selected radio ) 
Soy un poco nuevo con jQuery, pero puede hacerlo trabajar para realizar la funcionalidad que estoy buscando. La siguiente función verifica el valor de la en...

2  Validación instantánea de la longitud del campo de la forma  ( Instantaneous validation of form field length ) 
Dado que tengo una función que se puede hacer de unas maneras como de costumbre, me preguntaba qué sigue es el mejor para lograr la validación del formulario ...

6  Validación básica de forma  ( Basic form validation ) 
Pregunta + Resultado deseado El código a continuación funciona actualmente, sin embargo, no estoy convencido de que la utilización de un 9988777666554433...

7  Clase Forma Formulario PHP  ( Php form builder class ) 
Me gustaría revisar mi clase de generador de formularios. Quiero saber sobre los siguientes temas: es este eficiente? ¿Esto tiene alguna falla? es esto...

1  ¿Hay una forma de secadora para crear este generador de cita jQuery?  ( Is there a dryer way to create this jquery quote generator ) 
Esta es una de mis primeras aplicaciones reales que he realizado con JavaScript (jQuery), por lo que sé que mi enfoque probablemente no sea el mejor y mi larg...

1  Pumular las desplegaciones de la provincia de la provincia de la ciudad de la consulta de la Firana  ( Populate country province city dropdowns from firebase query ) 
Soy nuevo en Firebase y soy un desarrollador de SQL en recuperación, por lo que no he envuelto mi mente en todos los aspectos de las consultas de Firsebase. T...

5  Validación del formulario AJAX  ( Ajax form validation ) 
Este es mi primer intento de la validación del formulario AJAX, y todo funciona como se esperaba, el ejemplo final final mantendrá muchos más campos de entrad...

3  Verificando que todos los campos de formulario se completan  ( Verifying that all form fields are filled in ) 
Agarré la forma de algún sitio aleatorio porque solo estoy interesado escribir el Javascript en este momento. Estoy tratando de verificar que un usuario hay...

1  Formulario de validación JavaScript  ( Validation form javascript ) 
Soy un principiante para JavaScript y sé sobre las validaciones de jQuery, sin embargo, no quiero usar una base como jQuery todavía. Me pregunto si lo que h...




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