Foundation-sites: Abide custom pattern for password field conflicting with HTML5 Chrome

[Yanchek99]

Google Chrome is rendering a "Please match the requested format." error and preventing form submission when validating with a custom pattern. Even if the criteria is matched for the custom pattern I am still unable to submit form due to chrome HTML5 validation

Application javascript to register custom pattern

$(function(){
    $(document).foundation();
    Foundation.Abide.defaults.patterns['password_length'] = /^(.){8,72}$/;
});

Form with password field containing custom pattern

<form data-abide="2ri494-abide" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">   
            <div class="row column">
              <label for="user_email">Email</label><input autofocus="autofocus" required="required" type="email" value="" name="user[email]" id="user_email"><small class="form-error">A valid email address is required.</small>
            </div>
            <div class="row column">
              <label for="user_password">Password</label><input autocomplete="off" pattern="password_length" minlength="8" maxlength="128" size="128" type="password" name="user[password]" id="user_password">
              <div class="small form-error">
                The password must be longer seven characters.
              </div>
            </div>
            <div class="row column">
              <label for="user_password_confirmation">Password confirmation</label><input autocomplete="off" data-equalto="user_password" type="password" name="user[password_confirmation]" id="user_password_confirmation"><small class="form-error">The passwords did not match</small>
            </div>
            <div class="row column">
              <input type="submit" name="commit" value="Sign Up" class="expanded button">
            </div></form>

Code Pen http://codepen.io/anon/pen/MyKerK

[nbankzy]

+1 facing the same issue, the code also fails on firefox.

[bc-ian]

Anyone find a workaround for this? Would be sweet to get abide running on my forms again.

[kball]

I believe you can work around this by putting the novalidate attribute on the form, telling the browser not to validate it and leaving it to Abide.

[colin-marshall]

@ncoden should we just add something about @kball's workaround to the docs and then close this out?