Show validation message when form is submitted or field is dirty - Both validation messages custom and default shown when submit

Question

I'm having two issues with custom messages:

first, the fist time I load the page the error messages are shown, I want to display them only when form is submitted or field is dirty (modified).

This is my code:

 <form class="form-horizontal name="newEventForm">
   <div ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert" >
   <div ng-message="required">You did not enter a field</div>
                                <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
   </div>
 </form>

The second issue I have is that when I submit the form It shows two messages, the custom message and the default require message. See image above (You did not enter a field is my custom message):

I want to do the ajax call when the form is valid

 $scope.ajaxSend = function (action, dataoSend, newEventForm) {
    if (newEventForm.$valid) {
        $.ajax({
            type: 'POST',
            url: "/" + _controller + "/" + action,
            contentType: 'application/json; charset=utf-8',                
            success: function (data) {
                $scope.table.reload();
            },
            error: function () {
            }
        });
    }
};

Answer 1

To prevent default validation, try adding the novalidate attribute to your form:

<form class="form-horizontal name="newEventForm" novalidate>`

You can take advantage of the $submitted property of the form and the $dirty property of each field to conditionally display the messages. Something like this:

<div ng-show="newEventForm.$submitted || newEventForm.Name.$dirty" ng-messages="newEventForm.Name.$error" style="color: maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
</div>