Menu icon Foundation
Data-abide "passwords do not match" :(

Hi there,
I am trying to use data-abide for a new project. I have been using foundation 4 for some time and also have a up and running data-abide form with f4 for some time now. Please point out what I do not see with below code..
I am trying to make the form validate the passwords whether two fields match, but consistently I am getting error "passwords do not match" :(

Thanks in advance..

abidepasswordvalidation

Hi there,
I am trying to use data-abide for a new project. I have been using foundation 4 for some time and also have a up and running data-abide form with f4 for some time now. Please point out what I do not see with below code..
I am trying to make the form validate the passwords whether two fields match, but consistently I am getting error "passwords do not match" :(

Thanks in advance..

visam over 5 years ago

<div id="registerForm" class="small reveal-modal" data-reveal>
   <br/>
   <form action="registerUser.php" method="post" data-abide>
        <fieldset>
            <legend>Register</legend>
            <div class="row">
                <div>
                    <br/>
                    <div class="panel">
                        <div class="name-field">
                            <label>Full Name <small>required</small></label>
                            <input type="text" name="name" required required pattern="[a-zA-Z]+" placeholder="Ali Veli">
                        </div>
                        <div class="email-field">
                            <label>Email address <small>required</small></label>
                            <input id="user-email" type="email" name="email"  required placeholder="ali@veli.com">
                            <span class="alert-box alert radius" id="user-email-alert" style="display: none;">
                                Oopps! There seems to be a record with the same email address.<br/>
                                You should use another one in order to perform a successful register!</span>
                        </div>
                        <div class="password-field">
                            <label>Password <small>required</small></label>
                            <input id="password" type="password" name="pass" required pattern="password" 
                                   placeholder="minimum 8 characters: including at least one number and one capital letter">
                            <small class="error">Your password must be minimum 8 characters, and include at least: one number and one capital letter.</small>
                        </div>
                        <div class="password-confirmation-field">
                            <label>Confirm Password <small>required</small></label>
                            <input id="confirmPassword" type="password" required
                                   data-equalto="password" placeholder="must match to the upper field">
                            <small class="error">The passwords did not match!</small>
                        </div>
                        <button type="submit" name="submit" value="register!">OK!</button>
                    </div>
                </div>                        
            </div>
        </fieldset>
    </form>
</div> 

visam over 5 years ago

Hi,

Why no one pay some interest here?
Thanks in advance..

Ankur Patel about 5 years ago

I noticed an issue that HTML5 has a pattern attribute in input element and it tries to regex pattern match with that instead of Zurb's Abide pattern matching.

Try to type in "password" without quotes and see if the validation error goes away. If so then it is using HTML5 pattern attribute to validate. I need to figure out how to remove this HTML5 validation and using zurb's validation. If you find out please post here.