html5 custom validation not working with angular

Question

I am using this below form:

<form name="signupForm" id="register-form" ng-submit="addUser(user)" method="POST">
    <div class="row">
        <input type="email" ng-model="user.email" id="reg_email" class="form-control" placeholder="Email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" minlength="5" maxlength="40" required>
        <input type="password" ng-model="user.password" id="reg_password" class="form-control" placeholder="Password" required='true' minlength="3" maxlength="10" required>
        <input type="submit" id="reg_submit" class="submit-input grad-btn ln-tr" value="Submit">
    </div>
</form>

When there error in form, I'm setting setCustomValidity() on input.

auth.signup($scope.userData, successAuth, function (error) {
    $rootScope.error = error.error;
    console.log("error: " , $rootScope.error);

    if($rootScope.error == "user already exists"){
        var input = document.getElementById("reg_email");
        input.setCustomValidity("$rootScope.error");
    } else{
        var input = document.getElementById("reg_email");
        input.setCustomValidity("");
        angular.element('#register-modal').modal('hide');
        document.getElementById("register-form").reset();
    }
});

Well the modal form doesn't close because of setCustomValidity() but I can't the error message I set on the input field.

Update:

Actually it is showing the error message on second click. why?

Error messages activates on second click and even when form is valid it is showing the error message.

kittu · Accepted Answer · 2016-10-16 17:47:45Z

1

I fixed it this way. Hope it helps some one.

auth.signup($scope.userData, successAuth, function (error) {
    $rootScope.error = error.error;
    if ($rootScope.error == "user already exists") {
        $scope.signupForm.reg_email.$setValidity("User already exists", false);
    }
});

Html:

<form novalidate>
    <input type="email" ng-model="user.email" id="reg_email" name="reg_email" required>
    <span ng-show="signupForm.reg_email.$invalid" class="custom-help-block">User already exists</span>
</form>

css:

.custom-help-block{
    color: red;
    margin-left: 5px;
    font-weight:bold;
}

answered Oct 16, 2016 at 17:47

kittu

7,03421 gold badges105 silver badges199 bronze badges

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

1 Comment

user3366706 Over a year ago

can you add some description of what you did there?

Collectives™ on Stack Overflow

html5 custom validation not working with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related