Angularjs evita el envío de formularios cuando falla la validación de entrada

Estoy escribiendo un formulario de inicio de sesión simple usando angularjs con alguna validación de entrada del lado del cliente para verificar que el nombre de usuario y la contraseña no estén vacíos y tengan más de tres caracteres. Ver el siguiente código:

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

Y el controlador:

var controller = function($scope) {

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

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

};

El problema es que login.submitse llamará a la función incluso si la entrada no es válida. ¿Es posible prevenir este comportamiento?

Como nota al margen, puedo mencionar que también uso bootstrap y requirejs.

Tu puedes hacer:

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

No hay necesidad de verificaciones del controlador.

Cambie el botón de enviar a:

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

Entonces, la respuesta sugerida de TheHippo no funcionó para mí, en cambio terminé enviando el formulario como un parámetro a la función de esta manera:

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

Esto hace que el formulario esté disponible en el método del controlador:

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

Sus formularios se colocan automáticamente en $ scope como un objeto. Se puede acceder a través de$scope[formName]

A continuación se muestra un ejemplo que funcionará con su configuración original y sin tener que pasar el formulario como parámetro en ng-submit.

var controller = function($scope) {

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

        }
    }

};

Ejemplo de trabajo: 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>

En tu controlador:

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

Aunque no es una solución directa para la pregunta de los OP, si su formulario está dentro de un ng-appcontexto, pero desea que Angular lo ignore por completo, puede hacerlo explícitamente utilizando la ngNonBindabledirectiva:

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

Solo para agregar a las respuestas anteriores,

Estaba teniendo 2 botones regulares como se muestra a continuación. (Sin tipo = "enviar" en cualquier lugar)

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

No importa cuánto lo intente, presionando enter una vez que el formulario fue válido , se llamó al botón "Borrar formulario", borrando todo el formulario.

Como solución alternativa,

Tuve que agregar un botón de envío ficticio que estaba deshabilitado y oculto. Y este botón ficticio tenía que estar encima de todos los demás botones como se muestra a continuación .

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

Bueno, mi intención nunca fue presentar en Enter, por lo que el truco dado anteriormente funciona bien.

Sé que este es un hilo viejo pero pensé que también haría una contribución. Mi solución es similar a la publicación ya marcada como respuesta. Algunas comprobaciones de JavaScript en línea hacen el truco.

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

Sé que es tarde y me respondieron, pero me gustaría compartir las cosas interesantes que hice. Creé una directiva ng-validate que engancha el envío del formulario, luego emite prevent-default si $ eval es falso:

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

En tu html:

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