Felipe Felix de Luca Felipe Felix de Luca - 4 months ago 11
jQuery Question

How can I reduce the redundancies in my code? [JS]

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

Answer

Anyway, here you have some optimization:

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>