Wie kann ich die Redundanzen in meinem Code reduzieren? [JS]

Question

Ich bin kein Profi in js so, mein Code ist ein Chaos (aber es funktioniert!). Ich möchte Ihre Hilfe bitten, einige Entlassungen in zwei Fällen zu reduzieren. Die beiden sind Codes beeinflussen diese beiden Formen:

<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 (eine Funktion, meine zwei Formen zu verhindern, leere Eingaben vor der Vorlage haben)

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 (Ich habe einen „bestätigen Ihre E-Mail "Bereich in meinem Formular, also habe ich diese Funktion gemacht, um sicherzustellen, dass der Benutzer den gleichen Wert in beiden Bereichen eingibt.

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'); 
    } 
} 

Answer 1

Wie auch immer, hier haben Sie einige Optimierungen:

function validateForm(form){ 
 
    var c = document.forms[form]["name"].value; 
 
    var d = document.forms[form]["tel"].value; 
 
    var e = document.forms[form]["address"].value; 
 
    var f = document.forms[form]["topic"].value; 
 
    var g = document.forms[form]["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 mailConfirm(formNum){ 
 
    var mail = document.getElementById("inputMail"+formNum).value; 
 
    var conMail = document.getElementById("inputConfirmMail"+formNum).value; 
 
    if(mail != conMail) { 
 
     alert('both emails are not the same'); 
 
    } 
 
}

form{ 
 
    padding: 1.2rem; 
 
}

<form action="contact.php" method="post" name="form1" onsubmit="return validateForm('form1')"> 
 
    <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="mailConfirm(1)" placeholder="Confirm E-mail"> 
 
    <input type="submit" value="Send"> 
 
</form> 
 

 
<form action="contact.php" method="post" name="form2" onsubmit="return validateForm('form2')"> 
 
    <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="mailConfirm(2)" placeholder="Confirm E-mail"> 
 
    <input type="submit" value="Send"> 
 
</form>