CODEWITHSUNDEEP
angularjstwitter-bootstrapvalidationgetonblur
discodane
discodane

Reputation: 2095

Bootstrap Validation Manipulation AngularJS

I have an input box for a new user to put in a userid. I want to dynamically check if the userid is already taken on-blur. I'm using bootstrap validation for form validation, and I'm having a hard time figuring out how to make it do what I want. In the validation, I have this code currently for userid: 

userid: {
    container: '#useridMessage',
    validators: {
        notEmpty: {
            message: '*Required'
        },
        stringLength: {
            min:3,
            message: 'Username must be at least 3 characters long'
        }
    }
},

What I want to be able to do in there is call a function I have for the on-blur action: 

$scope.userCheck = function () {
    userAPIService.getUserDetails($scope.user.username).success( function ( data ) {
        if(data.Status == 0){
            //make box red and invalid
        }
    }).error( function ( error ) {
        $scope.status = "Error is checking Username availability";
    })

}

My backend function is the getUserDetails which is a GET function. I was planning on, as is shown in the code, to check if the userid is a valid one (data.status == 0) already in our system and notify the user after that it is already taken. My desire is to maintain good coding practice and not by pass my bootstrap validation ( which is working well for everything else ) and make both work together, but since bootstrap validation is kind of a black box, I'm not sure how to do this.

Question: How can I get the validation to check some boolean variable, or how can I get the validation to make the backend call and then analyze the result like I want?

Thoughts: Ideally I'd like to be able to call the onblur function which would set some boolean and then the validation would just look at the validation, but I'm open to any idea to get this right. Thanks

Upvotes: 0

Views: 82

Answers (1)

MikeyM
MikeyM

Reputation: 78

I wonder if creating a custom validation directive would be a good approach. There's a good overview here How to add custom validation to an angular js form, also in the Custom Validation section of the Angular JS Forms documentation. Hope this helps.

Upvotes: 1

Related Questions