Question

我正在使用以下表格：

<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>

如果表单中出现错误，我会在输入中设置setCustomValidity()。

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();
    }
});

因为setCustomValidity()，模态形式不会关闭，但我无法在输入字段中设置错误消息。

更新

实际上它在第二次点击时显示错误消息。为什么呢？

第二次点击时会激活错误消息，即使表单有效，也会显示错误消息。

Answer 1

我用这种方式修好了。希望它有所帮助。

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;
}

html5自定义验证不使用角度

1 个答案: