WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Validate Login Infor with Jquery Validation (9 posts)

  1. ivanxiang
    Member
    Posted 1 year ago #

    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();
    				}
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    What's the difference between your HTML for the register form and your login form?

  3. ivanxiang
    Member
    Posted 1 year ago #

    This is the code for register form, I've inspected and inspected and still can't see any problem....

    <form id="join-form" action="http://localhost/***/wp-login.php?action=register" class="text" method="post">
                        <input id="user_login" name="" type="text" value="" />
    <input id="user_email" name="user_email" type="email" value="" />
                        <input id="pass1" name="pass1" type="password" value="" />
                    <div class="submit-button-ctn">
                    <input type="submit" class="submit-button" id="join-submit" value="join" />
                    </div>
                </form>
  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is your browser's console telling you?

  5. ivanxiang
    Member
    Posted 1 year ago #

    basically I don't see any error message so far...what should I do?

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Provide a link to the webpage with the issue.

  7. ivanxiang
    Member
    Posted 1 year ago #

    i'm still developing it locally...so sorry man, I can't provide a link at this moment...so you don't see any problem in my code?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can see something wrong with it. Look at the selectors. They don't match your login form's ID.

  9. ivanxiang
    Member
    Posted 1 year ago #

    oh, thank you very much~I found the problem~I mismatched the name with the id!

Topic Closed

This topic has been closed to new replies.

About this Topic