AngularJS Material form validation onSubmit

Question

I have a form that I've coded using AngularJS Material and wanted to add some form validations. The following is a snippet of my code:

  <form name="hrRequestForm">
    <div layout="row">
        <md-input-container class="md-block" flex-gt-xs>
            <label>Title</label>
            <input name="textInput" id="textInput" ng-model="inputVal" required>
            <div ng-message="hrRequestForm.textInput.$error" role="alert">
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>
    </div>
</form>

The validation works when I click on the input and leave it without typing anything. When this happens, the error message appears below the input and the input turns red, which is perfect.

What doesn't work is if I open up the form and simply press Submit without filling anything out. I am hoping that this scenario would light up the error message as well, but nothing happens.

I've read a lot of posts saying to add novalidate and ng-submit on the <form> tag. I've tried that and it still does nothing. Currently, I have a md-button with a ng-click = "c.submit()" and am hacking some validation error stylings via jquery:

c.submit = function(){
    var validEntry = true;
    if($('#textInput').val() == ''){
        $('#textInput').css('border-color', 'rgb(221,44,0)');   
        validEntry = false;
    }

While this works, it isn't ideal and I'm just generally curious why my validations don't work. Can someone guide me in the right direction? Thanks!

AngularJS Material form validation onSubmit

0 Answers0