Prevent Form Submit if Phone Number is Invalid - Angularjs

Issue

I am wanting to prevent form submission if the phone input is invalid per my ng-pattern WITHOUT using disabled on the button. I have tried adding logic to my submitForm function to no avail. Something along the lines of...

Adding a validation function to my angular code:

const validPhone = function (phone) {
          var re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
          return re.test(phone);
        }

And adding some logic to my submit function like...

if (!this.validPhone(main.contact.phone)) {
                        $window.alert("Please a valid phone number!");
                        return false;
                    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script>
        (function () {
            "use strict";
            angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
            function MainCtrl($document, $timeout, $window) {
                var main = this;
                main.now = new Date();
                main.contact = {
                    phone: "##phone##",
                    company: "##company##"
                };
                main.submitForm = _submitForm;

                function _submitForm() {
                    if (!main.contact.phone) {
                        $window.alert("Please enter your phone number!");
                        return false;
                    }

                    if (!main.contact.company) {
                        $window.alert("Please enter your company!");
                        return false;
                    }

                    $timeout(function () {
                        $document[0].forms[0].submit();
                    }, 0);
                }
            }
        })();
    </script>

<form method="post" id="f" novalidate name="mainForm">
                                    <div class="input-field">
                                        <input type="text" placeholder="Phone *" value="##phone##" name="phone"
                                            ng-model="main.contact.phone" required
                                            style="margin-bottom: 0; margin-top: 16px"
                                            ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im" />
                                        <small class="form-text rz-error" ng-show="mainForm.phone.$error.required">This
                                            field is
                                            required.</small>
                                        <small class="form-text rz-error" ng-show="mainForm.phone.$error.pattern">
                                            Doesn't look like a valid phone number!</small>
                                    </div>
                                    <div class="input-field">
                                        <input type="text" placeholder="Company *" name="company"
                                            ng-model="main.contact.company" value="##company##" required
                                            style="margin-bottom: 0; margin-top: 16px" />
                                        <small class="form-text rz-error"
                                            ng-show="mainForm.company.$error.required">This field is
                                            required.</small>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="callback_request"
                                            value="yes" style="margin-bottom: 0; margin-top: 16px" />
                                        <label class="form-check-label" for="flexCheckDefault">
                                            I would like a call & a free audit.
                                        </label>
                                    </div>


                                    <div class="input-field">
                                        <input type="submit" class="button alt" value="Download Now"
                                            ng-click="main.submitForm()" style="margin-bottom: 0; margin-top: 16px" />
                                    </div>
                                    <div style="margin-top: 10px">
                                        <small><em class="text-muted">* Denotes a required field.</em></small>
                                    </div>
                                </form>

Solution

I removed the disabled from the button and added logic to check for a valid phone number to my angular.js code:

<script>
        (function () {
            "use strict";
            angular.module("rzApp", []).controller("MainCtrl", MainCtrl); // as main.
            function MainCtrl($document, $timeout, $window) {
                var main = this;
                main.now = new Date();
                main.contact = {
                    phone: "##phone##",
                    company: "##company##"
                };
                main.submitForm = _submitForm;
                main.validPhone = _validPhone;

                function _submitForm() {
                    if (!main.validPhone(main.contact.phone)) {
                        $window.alert("Please enter a valid phone number!");
                        return false;
                    }

                    if (!main.contact.company) {
                        $window.alert("Please enter your company!");
                        return false;
                    }

                    $timeout(function () {
                        $document[0].forms[0].submit();
                    }, 0);
                }

                function _validPhone(phone) {
                    const re =
                        /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
                    return re.test(phone);
                }
            }
        })();
    </script>

Answered By - audreywrong