angular form validation not working on form submitting

Question

I'm new in angularJS. My form doesn't validate on submit. I use angular-validation module downloaded from bower. How can I validate form on submit button?

I use refrence from https://github.com/huei90/angular-validation/blob/master/API.md
My form is like that:

    <div ng-controller="nameController">
        <form name="myForm" ng-submit="submitForm()">
                    <label for="ud_fname"></label>
                    <input
                        type="text"
                        id="ud_fname"
                        name="ud_fname"
                        placeholder="First Name"
                        ng-model="form.ud_fname"
                        valid-method="blur"
                        validator="required"
                        required-error-message="Required"
                    >

                    <label for="ud_lname"></label>
                    <input
                        type="text"
                        id="ud_lname"
                        name="ud_lname"
                        placeholder="Last Name"
                        ng-model="form.ud_lname"
                        valid-method="blur"
                        validator="required"
                        required-error-message="Required"
                    >

                    <input type="submit" value="Add" class="pure-button" />
                    <input type="reset" value="Reset" class="pure-button" />

    </form>

My Controler is like that:

app.controller('nameController', function ($scope, $http) {

    // insert record
    $scope.submitForm = function (){
        var url= 'functions/insert.php';
        var data = {
            ud_fname: $scope.form.ud_fname,
            ud_lname : $scope.form.ud_lname,
        };
        console.log(data);
        $http({
            url: url,
            data: data,
            method: 'post'
        }).success(function (response){
           console.log(response);
        });
    };

});

Answer 1

You need to validate on ng-submit & don't call an submitForm if its not valid form

ng-submit="myForm.$valid && submitForm()"

Answer 2

You need to validate the form in your controller as well. Also, it would be better if you pass the form (user) as a parameter. If you are writing unit tests (which you should), it would be easier to test your method easily in that case as there will be no coupling with $scope.

P.S. Migrate your code to controllerAs syntax, you won't regret it.

$scope.submitForm = function (user, isValid){
    if (isValid) {
    var url= 'functions/insert.php';
    var data = {
        ud_fname: user.ud_fname,
        ud_lname : user.ud_lname,
    };
    console.log(data);
    $http({
        url: url,
        data: data,
        method: 'post'
    }).success(function (response){
       console.log(response);
    });
}
};

And your form will become:-

<form name="myForm" ng-submit="submitForm(form, myForm.$valid)">
.....
</form>