I want to validate password using ng-pattern. I use the same regular expression in my model and it works. I want to display error message if password is not valid (at least 7 characters, one of them must be number).

I've added regular expression to ng-pattern, but it only shows error message, if password is shorter than 7 characters (because I use ng-minlength), and it doesn't show, if password is also in bad format. Can someone help me to figure out why it happens?

Model:

    [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$", ErrorMessage = "Máte příliš krátké heslo (minimum je 7 znaků), popř. vaše heslo není ve správném tvaru.")]
    [Required(ErrorMessage = "Zadejte prosím Vaše heslo.", AllowEmptyStrings = false)]
    public string Password { get; set; }

Registration.cshtml:

    <input type="password" style="width: 600px" class="form-control" name="Password" id="Password" ng-pattern="^(?=.*[a-z])(? =.*[A-Z])(? =.*\d)[a-zA-Z\d]{7,}$" ng-model="User.Password" ng-minlength="7" ng-class="submitted?'ng-dirty':''" required />
                    <span class="error" ng-show=" (form.Password.$dirty || submitted) && form.Password.$error.required">Zadejte prosím Vaše heslo.</span>
                    <span class="error" ng-show=" (form.Password.$dirty || submitted) && (form.Password.$error.minlength || form.Password.$error.pattern)">Máte příliš krátké heslo (minimum je 7 znaků), popř. vaše heslo není ve správném tvaru.</span>
                    <span class="success" ng-show=" (form.Password.$dirty || submitted) && form.Password.$valid">Vaše heslo má dostatečnou délku a je ve správném tvaru.</span>

I want to validate password using ng-pattern. I use the same regular expression in my model and it works. I want to display error message if password is not valid (at least 7 characters, one of them must be number).

I've added regular expression to ng-pattern, but it only shows error message, if password is shorter than 7 characters (because I use ng-minlength), and it doesn't show, if password is also in bad format. Can someone help me to figure out why it happens?

Model:

    [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$", ErrorMessage = "Máte příliš krátké heslo (minimum je 7 znaků), popř. vaše heslo není ve správném tvaru.")]
    [Required(ErrorMessage = "Zadejte prosím Vaše heslo.", AllowEmptyStrings = false)]
    public string Password { get; set; }

Registration.cshtml:

    <input type="password" style="width: 600px" class="form-control" name="Password" id="Password" ng-pattern="^(?=.*[a-z])(? =.*[A-Z])(? =.*\d)[a-zA-Z\d]{7,}$" ng-model="User.Password" ng-minlength="7" ng-class="submitted?'ng-dirty':''" required />
                    <span class="error" ng-show=" (form.Password.$dirty || submitted) && form.Password.$error.required">Zadejte prosím Vaše heslo.</span>
                    <span class="error" ng-show=" (form.Password.$dirty || submitted) && (form.Password.$error.minlength || form.Password.$error.pattern)">Máte příliš krátké heslo (minimum je 7 znaků), popř. vaše heslo není ve správném tvaru.</span>
                    <span class="success" ng-show=" (form.Password.$dirty || submitted) && form.Password.$valid">Vaše heslo má dostatečnou délku a je ve správném tvaru.</span>

• javascript
• angularjs
• regex

• They're not quite the same though, are they? You have a space between ? and = in a couple places in the ng-pattern.... – Heretic Monkey Commented Dec 1, 2016 at 16:01

2 Answers 2

You will have to use / before and after your regex, and as pointed out by @MikeMcCaughan, remove any spaces in the positive lookahead. For example, change (? = to (?=

ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$/"

Change pattern to /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{7,}$/

<input type="password" style="width: 600px" class="form-control" name="Password" id="Password" ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{7,}$/" ng-model="User.Password" ng-minlength="7" ng-class="submitted?'ng-dirty':''" required />
                <br/>
                <span class="error" ng-show=" (form.Password.$dirty || submitted) && form.Password.$error.required">Required</span>
                <span class="error" ng-show=" (form.Password.$dirty || submitted) && form.Password.$error.minlength">Mini 7 characters</span>
                <span class="success" ng-show=" (form.Password.$dirty || submitted) && form.Password.$error.pattern">Invalid</span>

Have a look at demo link https://plnkr.co/edit/Xo1qfEHS2NrdUHyHDjml?p=preview