setCustomValidity() is always shown even when form is filled correctly

Question

I have very simple form which i want to validate by using required attribute :

          <form name="form">
                <label for="Header">Overskrift</label>
                <input type="text" class="span5" name="Header" ng-model="Message.header" placeholder="Overskrift" oninvalid="this.setCustomValidity('Indtast overskrift')"  required />

                <label for="Body">Tekst</label>
                <textarea name="Body" class="span5" ng-model="Message.body" rows="10" cols="20" placeholder="Besked" oninvalid="this.setCustomValidity('Indtast Tekst')" required />
                <input type="submit" class="btn btn-primary" value="Send" ng-click="send()" />
            </form>

but doesnt matter how i fill out the form first field is always invalid and error message is shown, what am i doing wrong?

Answer 1

Why don't you use the standard AngularJS form validation controls? Like:

<input type="text" class="span5" name="Header" ng-model="Message.header" placeholder="Overskrift" required />

And you could check the validity of your field as

$scope.form.Header.$dirty && $scope.form.Header.$invalid

where $dirty is an indicator if the field has been modified and $invalid indicates that the input field does not contain a valid value. See the AngularJS docs on forms for more info about it