Search code examples
javascriptjqueryformsoptimizationredundancy

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

Solution

  • 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>