0

I am trying to validate some user form data for the login portion of my website, however I am running into some issues, where even when I am returning false, the action for the given form still happens.

Here is where I use some jQuery to handle the form submission:

$(function() {
    $("#submit_login").submit(function() {
        var email = $(".log_user").val();
        var elength = email.length;
        var pass = $(".log_pass").val();
        var plength = pass.length;

        var checkemail = email.match(/^[a-zA-z0-9]+@.+\..+$/);
        var cmlength = checkemail.length;

        var checkpass = pass.match(/^([a-zA-z0-9]|[_\-!])*$/);
        var cplength = checkpass.length;
        
        if(cmlength!=elength) {
            //email is invalid
            alert("email is bad");
        }

        if(cplength!=plength) {
            //password is invalid
            alert("password is bad");
        }

        event.preventDefault();
    });
});

What I am trying to do is use a regular expression to match with the email and password to determine whether or not what they entered is a valid user and pass, and if it is, I will then make a request to the server to actually check if the user exists, however if I were to enter an invalid email, nothing happens and it still sends that request to the server and redirects to my login handler.

Once I get this figured out I am going to replace those alerts with just a simple toggleClass and make a red outline along with a prompt telling the user what is wrong with their input, but I can't get there without figuring out whats wrong with this first!

Here is my form in HTML

<form class="login_form" method="GET" action="handlers/login_handler.php">
            <div class="user"><span>Email: </span><input class="log_user" type="text" name="email" id="username"></div>
            <div class="pass"><span>Password: </span><input class="log_pass" type="text" name="password" id="password"></div>
            <div class="submit_box">
                <div class="create_box">
                    <a id="create_account" href="create.php">Create account</a>
                </div>
                <button id="submit_login" type="submit" value="Submit">Login</button>
            </div>
        </form>

Any help would be appreciated!

backward forward
  • 429
  • 3
  • 17
  • 1
    length is a property not a method. It should be `.length`, not `.length()` that will be causing a syntax error which will mean your form is not prevented and is likely the root of your issue. This is why it's a ***much*** better idea to use `event.preventDefault()` instead of `return false;` when cancelling an event handler. Lastly, given the purpose of your code, using `test()` instead of `match()` would seem the better choice - and will avoid the need for a `length` check at all. – Rory McCrossan Dec 03 '20 at 20:12
  • That's good advice above and if you need more help, read this first. https://stackoverflow.com/questions/20352799/ajax-form-submit-with-preventdefault – react_or_angluar Dec 03 '20 at 20:16
  • @RoryMcCrossan oh! thanks! I am pretty new to javascript/jquery, and figured I would've seen this error in the console so I didn't even catch it! – backward forward Dec 03 '20 at 20:27
  • hmmm, I did change this to length, but I am seeing no change. I'll update post to reflect my change – backward forward Dec 03 '20 at 20:28

0 Answers0