angularjs ng-pattern change css style of elements based on regex condition

Question

In my angularjs form, I am checking the password pattern with a regex that checks for multiple conditions. Based on different condition checks of this regex, I want to change the css for one of the elements.

Jsfiddle link Here .

The source model that inspired this is from here.

This is my function to check the pattern against the regex :

$scope.passPatternCheck= (function() {
    var regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]?)[A-Za-z\d!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]{8,}/;
    return {
        test: function(value) {               
            return regexp.test(value);
        }
    };
})();

Some notes:

this regex don't check for the starting/ending spaces; this should also be adjusted
the ng-if that shows/hides the div of the conditions list is not currently working.

question:

I want to reproduce the same behaviour from the godaddy site account creation page. So the goal is to have the same css behaviour according to the condition completed.

update 2:

my submit button of the form theForm should get disabled if any of the fields that are required are not filled out or an error in the patterns occurred:

<button type="submit" class="btn btn-primary"ng-disabled="theForm.$invalid" ng-click="submit()">
</button>

but with the Shantanu's answer, this is not yet possible.

Shantanu · Accepted Answer · 2017-08-10 23:26:13Z

4

Adding one regex for ng-pattern will not achieve it. Because if regex test fails then we would not know exactly which case of all those checkbox conditions failed. You've to handle different regex for each conditions & check them in either custom directives (using $validators) and create custom validators for that each validation OR you can check those condition on change of password input field inside controller & create one object with different properties as Boolean values for those validation conditions.

I've created jsfiddle for 2nd method: http://jsfiddle.net/shantanu_k/Lnupw3p2/7/

Updated based on updated question (form has to be invalid if any conditions fail & thus making submit button disabled): http://jsfiddle.net/shantanu_k/Lnupw3p2/10/

edited Aug 10, 2017 at 23:26

answered Aug 10, 2017 at 19:25

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Naren Murali Over a year ago

really cool answer, but what about the password field being red when the conditions are not satisfied

Bonnard Over a year ago

cool, but there is a small bug, when you fulfill every condition, and then clear the password field, the length condition is checked! whereas it is empty.

Shantanu Over a year ago

@NarenMurali Have ng-class on input field & handle has-error based on those condition properties boolean values. Check this version: jsfiddle.net/shantanu_k/Lnupw3p2/9

Naren Murali Over a year ago

@Shantanu yeah it looks better, maybe a bit more css tweaks :)

Shantanu Over a year ago

@Bonnard Check my updated answer. Handle validity of such input manually using $setValidity.

|

Collectives™ on Stack Overflow

angularjs ng-pattern change css style of elements based on regex condition

Some notes:

question:

update 2:

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Some notes:

question:

update 2:

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related