Question

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>

Answer 1

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