Esta pergunta já tem uma resposta aqui:

Estou com um problema com a função preventDefault. Isso não funciona. Aqui está o meu arquivo JS:

(function() {
    var app = {
        initialize : function () {
            this.setUpListeners();
        },
        setUpListeners: function () {
            $('form').on('submit', app.submitForm);
        },
        submitForm: function(e){
            e.preventDefault();                
        }
    }

    app.initialize(); 
}());

Meu código HTML possui 2 botões de confirmação. O segundo passo está oculto e deve ser exibido quando o primeiro passo for concluído. Mas não posso pelo menos adicionar preventDefault na primeira etapa.

Aqui está o meu HTML:

<form id="login">
    <!-- #first_step -->
    <div id="first_step">

        <h1>Registration Form</h1>
        <fieldset id="inputs">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" name="username" id="username" class="form-control" placeholder="Create a username" required="">
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="Create a password" required="">
            </div>

            <div class="form-group">
                <label for="cpassword">Password</label>
                <input type="password" name="password" id="cpassword" class="form-control" placeholder="Confirm your password">
            </div>
        </fieldset>

        <fieldset id="actions">
            <div class="form-group">
                <input type="submit" class="submit" name="submit_first" id="submit_first" value="Next">
            </div>
        </fieldset>
    </div>

    <!-- #second_step -->
    <div id="second_step">
        <h1>Registration Form</h1>
        <fieldset id="inputs">
            <label>Name</label>
            <input type="text" name="name" id="firstname" class="form-control" placeholder="Enter your name" autofocus="" required="">

            <label>Surname</label>
            <input type="text" name="surname" id="lastname" class="form-control" placeholder="Enter your last name" required="">

            <label>Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
        </fieldset>

        <fieldset id="actions">
            <input  class="submit" type="submit" name="submit_second" id="submit_second" value="Next">
        </fieldset>
    </div>
</form>

Eu sinto Muito. Eu sou apenas um iniciante em js e ficarei muito agradecido se alguém me ajudar