Issue with matching password with javascript in Visualforce Page

Question

Here I had write javascript to match password and confirm password

< script >
function check() {
        var p1 = $('.password11').attr('value');
        var p2 = $('.confirm_password').attr('value');
        if (p1 != p2) {
            $('#message').css('color', 'red');
            $('#message').html('Not Matched');
            return false;
        } else {
            $('#message').css('color', 'green');
            $('#message').html('Matched');
            passwordcheck();
        }
        if (p1 == null || p2 == null) {
            $('#message').css('color', 'red');
            $('#message').html('Enter the new Password');
            return false;
        }
    }

function afterMatch() {
    check();
}

Here, my visualforce page code where i m trying to matching these to values--

<div class=" slds-row slds-size--1-of-1 slds-align_absolute-center">
    <div class="slds-form-element slds-p-around--medium" style="width:300px">
        <div class="slds-form-element slds-size_1-of-1" style="padding-top: 15px;">
            <label class="slds-form-element__label">
            Password
            </label>
        </div>
        <div class="slds-form-element__control slds-size_1-of-1">
            <apex:input  id="password11"  styleclass="slds-input password11" value="{!newpassword}"/>
        </div>
        <div class="slds-form-element slds-size_1-of-1">
            <label class="slds-form-element__label">
            Confirm Password
            </label>
        </div>
        <div class="slds-form-element__control slds-size_1-of-1">
            <apex:input styleclass="slds-input confirm_password"  value="{!confirmpassword}" id="confirm_password"/>
            <span id='message'></span>
        </div>
    </div>
</div>
</div>
<footer class="slds-modal__footer">
    <button class="slds-button slds-button_brand " onclick="afterMatch();" >Continue</button>
</footer>

Answer 1

You need to return the "false" value back to the handler to prevent form submission. In reality, you just need to call check instead of afterCheck:

<button class="slds-button slds-button_brand " onclick="if(check()===false) return false;" >Continue</button>