带有“ return false”的表单提交将重新加载当前页面

Question

I have been trying to fix this code for hours, and I still cannot make it work.

This is rather basic:
I am building an hybrid iOS app, and there is an area which requires the user to log into our system, and I use Hammer.js to handle touch events.
So, on the page, I have a form and a submit button. And in my JS app file, there is the ajax requests to my server to check credentials.

Though, it doesn't work: my form keeps reloading the page, whatever I do. And as it refreshes the window, my ajax request doesn't get any chance to work.

Here is the HTML form:

<div class="login-form-parent">
  <div class="login-form">
    <section>
      <h2>Sign in to GraphiX Studios CPM</h2>
      <form name="loginForm" id="login" method="post" submit="#" >
      <fieldset>
        <input type="text" name="login" id="loginEmail" placeholder="Username" autocapitalize="false" autocorrect="false" >
        <input type="password" name="password" id="loginPass" placeholder="••••" >
        <aside>
          <label for="rememberLogin">Remember me</label>
          <input type="checkbox" name="rememberLogin" id="rememberLogin" >
        </aside>
        <footer>
          <input type="submit" name="submit" id="submitLogin" value="Login" >
        </footer>
      </fieldset>
      </form>
    </section>
  </div>
</div>

The two <div> , the <aside> , <section> and <footer> tags are only here for styling purposes.

And here is the JS code:

var loginEl = document.getElementById('submitLogin');
Hammer(loginEl, {tap_max_touchtime: 1000}).on("tap", loginFunctions);
function loginFunctions() { 
    var usernameValidation = $("input#loginEmail").val();  
    if (usernameValidation == "") {  
        $("#login_error").show();  
        $("input#login").focus();  
    return false;  
    }  
    var passwordValidation = $("input#loginPass").val();  
    if (passwordValidation == "") {  
        $("#password_error").show();  
        $("input#password").focus();  
    return false;  
    }
    if (usernameValidation != "" && passwordValidation != "") {
        $.submit(function() {
            var username = $('#loginEmail').val();
            var password = $('#loginPass').val();
            $.ajax({
                url: 'loginProcessing.php',
                type: 'POST',
                data: {
                  user: username,
                  pass: password
                },
                success: function(response) {
                    if(response == '1') {
                        // Success
                        alert('Success');
                    } else {
                        // Error
                        alert('Failed');
                    }
                }
            });
            return false;
        });
    }
return false;
}

I can't debug that on my own: I've been trying for hours different solutions and I've already searched among Google and Stack Overflow resources.

Feel free to clean up or improve the JS code.

Answer 1

try using:

event.preventDefault();

instead of return false, in the start of your $.submit function

Answer 2

将<input type="submit" name="submit" id="submitLogin" value="Login" >的<input type="button" name="submit" id="submitLogin" value="Login" >