Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Single else clause for multiple if clauses - javascript

First: I'm JavaScript newbie. So.. I have basic form with password, repeat password, email and repeat email fields. I want to check if password is equal to repeat password. If it's not, alert message appears and page reloads. Same for email and repeat email. BUT if pass and repeat password aren't equal AND email and repeat email aren't equal, first alert message appears, then the second message (this time for email) appears too fast. I want to show only one alert message when both fields don't match.

<script type="text/javascript">

           function checkFields() {
            var pass= document.getElementById('password');
            var reppass= document.getElementById('reppass');

            var email= document.getElementById('email');
            var repemail= document.getElementById('repemail');

            if (pass.value != reppass.value) {
               alert('Passwords dont match');
               window.location.reload();
            }

            if (email.value != repemail.value) {
                alert('Emails dont match');
                window.location.reload();
            }                   

            else if (pass.value != reppass.value && email.value != repemail.value) {
                alert('Both fields dont match');
                window.location.reload();
            }

        }   

  </script>

And the form:

<form onSubmit="checkFields()">
<p><label>Password:</label> <input name="password" id="password" required="true" type="password" /></p>
<p><label>Repeat password:</label> <input name="reppass" id="reppass" required="true" type="password" /></p> 
<p><label>Email:</label> <input name="email" id="email" required="true" type="email" /></p>
<p><label>Repeat Email:</label> <input name="repemail" id="repemail" required="true" type="email" /></p>
<p><input type="submit" value="Send"></p> 
</form>
like image 744
sundaysloth Avatar asked Jul 16 '26 16:07

sundaysloth


1 Answers

You can simply return from the if clauses like this:

function checkFields() {
    var pass = document.getElementById('password');
    var reppass = document.getElementById('reppass');

    var email = document.getElementById('email');
    var repemail = document.getElementById('repemail');

    if (pass.value != reppass.value && email.value != repemail.value) {
        alert('Both fields dont match');
        window.location.reload();
    }

    if (pass.value != reppass.value) {
        alert('Passwords dont match');
        window.location.reload();
        return;
    }

    if (email.value != repemail.value) {
        alert('Emails dont match');
        window.location.reload();
        return;
    }

}

I like this style, because it prevents nesting if clauses. The downside is, that you have multiple return points that can be confusing - this heavily depends on the length of the function.

EDIT

Updated order of if blocks

like image 179
topek Avatar answered Jul 19 '26 06:07

topek



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!