Validate Login Infor with Jquery Validation

Hello, everyone~

I’ve created a login and a register form which is linked to login.php on my front page, and I want to validate input information without being redirected to the error page if user submit something wrong, so I used jquery’s validation plugin to validate all the information before the form being submitted.

The issue here is I can only make the validation working for the register form but not for the login form. I’ve searched everywhere and still can’t find the answer, so I hope anyone could help me here please?

The code I used:

<form id="login-form" action="http://localhost/***/wp-login.php" class="text" method="post">
                    <input id="user_login" name="" type="text" value="" />

                    <input id="user_pass" name="pwd" type="password" value="" />                                   

                <input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="3" />

                <div class="submit-button-ctn">
                <input type="submit" class="submit-button" id="login-submit" value="Login" />

                </div>
            </form>

This is the jquery part:

$("#join-login-form").validate({
			rules:{
				user_login: {
					required: true,
					maxlength: 18,
					minlength: 6
					},
				user_pass: {
					required:true,
					},
			},
			highlight: function(element, errorClass) {
				$(element).children().addClass("invalid");
			},
			unhighlight: function(element, errorClass) {
				$(element).children().removeClass("invalid");
			},
			errorContainer: "#error",
			errorLabelContainer: '#errorsList',
			wrapper: "li",
			errorElement: "div",
			onkeyup: false,
			onsubmit:true,
			debug:true,
			submitHandler:function(form) {
				form.submit();
				}