angularjs는 입력 유효성 검사에 실패할 때 폼 제출을 방지합니다.

angularjs는 입력 유효성 검사에 실패할 때 폼 제출을 방지합니다.

사용자 이름과 비밀번호가 비어 있지 않고 3자를 넘지 않았는지 확인하기 위해 클라이언트 측 입력 검증과 함께 angularjs를 사용하여 간단한 로그인 폼을 작성합니다.다음 코드를 참조하십시오.

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

컨트롤러:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

는 '이러다'라는입니다.login.submit입력이 유효하지 않은 경우에도 함수가 호출됩니다.이작 방지 지지 지? ???

참고로 부트스트랩과 requirejs도 사용하고 있습니다.

다음 작업을 수행할 수 있습니다.

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

컨트롤러 체크는 불필요합니다.

[ Submit ]버튼을 다음으로 변경합니다.

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

그래서 TheHippo에서 제안한 답변은 나에게 효과가 없었고, 대신 다음과 같이 폼을 파라미터로 함수에 보냈습니다.

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

이것에 의해, 컨트롤러 방식에서 폼을 사용할 수 있게 됩니다.

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

폼은 오브젝트로 $scope에 자동으로 들어갑니다.은 하다, 하다, 하다, 하다, 하다.$scope[formName]

다음은 원래 설정으로 동작하며 폼 자체를 ng-submit 매개 변수로 전달할 필요가 없는 예입니다.

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

작업 예: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

컨트롤러 내:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

대한 이 OPs 에 있는 ng-app콘텍스트는 Angular가 완전히 무시하도록 하는 경우 지시어를 사용하여 이를 명시적으로 수행할 수 있습니다.

<form ng-non-bindable>
  ...
</form>

위의 답변에 덧붙이자면,

저는 아래와 같이 2개의 일반 버튼을 가지고 있었습니다.(타입 없음="어디서나")

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

아무리 노력해도 폼이 유효하면 Enter 키를 누르면 "Clear Form" 버튼이 호출되어 폼 전체가 지워집니다.

회피책으로서

비활성화 및 숨겨진 더미 제출 버튼을 추가해야 했습니다.그리고 이 더미 버튼은 아래와 같이 다른 모든 버튼 위에 있어야 합니다.

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

음, 제 의도는 Enter에 제출하지 않으려는 것이었기 때문에 위의 해킹은 정상적으로 작동합니다.

나는 이것이 오래된 속설이라는 것을 알지만 나도 공헌을 해야겠다고 생각했다.나의 솔루션은 이미 답변으로 표시된 게시물과 유사합니다.일부 인라인 JavaScript 체크가 기능을 합니다.

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

늦은 감이 있지만, 제가 만든 깔끔한 것을 공유하고 싶습니다.폼의 onsubmit을 후크하는 ng-validate 디렉티브를 작성했습니다.$eval이 false일 경우 prevent-default를 발행합니다.

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

html:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">

언급URL : https://stackoverflow.com/questions/16263158/angularjs-prevent-form-submission-when-input-validation-fails