Angular validations: Restrict server request if user enters invalid email or password

Question

<form name="LPform" novalidate>
                <div class="form-row clearfix">
                  <label class="lbl-fld" style="margin-left: 12%;width:20%;">Email ID</label>
                  <input class="mob-adj-inpbx " type="email" name="uemail" ng-model="useremail" placeholder=" me@example.com" ng-required="true"/>
                  <div class="valid-chk validation-loginpopup" ng-show="LPform.uemail.$dirty && allow_Invalid">
                    <i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.uemail.$valid]" class="icon-correct"></i>
                  </div>
                  <div class="error-prompt" ng-show="LPform.uemail.$dirty && allow_Invalid">
                  </div>
                </div>
                <div class="form-row clearfix">
                  <label class="lbl-fld" style="margin-left: 12%;width:20%;">PASSWORD</label>
                  <input class="mob-adj-inpbx" type="password" name="upassword" ng-model="userpassword" placeholder=" password" ng-required="true"/>
                  <div class="valid-chk validation-loginpopup" ng-show="LPform.upassword.$dirty && allow_Invalid">
                    <i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[LPform.upassword.$valid]" class="icon-correct"></i>
                  </div>
                  <div class="error-prompt" ng-show="LPform.upassword.$dirty && allow_Invalid">
                  </div>
                </div>

                <div id="server_message" class="form-row clearfix basic-error-msg-loginpopup" ng-show="server_message">
                    {{server_message}}
                </div>
                <div class="btn-container clearfix mobile-adj" style="margin-left:17.2%;">
                  <div class="btn-wrap btn-loginpopup">
                    <input style="max-height:40px;width:121%;" type="submit" name="commit"  value="LOGIN" ng-click="login_request()"/>
                  </div>
                </div>
               </form>

This part is displayed to the user and the inputs are validated using angular validations. All validations are working fine.

 $scope.login_request = function(){
    if(LPform.useremail.$valid && LPform.userpassword.$valid) {
        $scope.allow_Invalid = "true";
        $http({
            method: 'POST',
            url: '/users/home_login',
            data: {email: $scope.useremail, password: $scope.userpassword}
        }).success(function (response) {
            console.log(response);
            window.location = response.location;
        }).error(function (response) {
            console.log(response);
            $scope.server_message = response.server_message;
        });
    }
    else if(!LPform.useremail.$valid) {
        $scope.allow_Invalid = "true";
        $scope.server_message = "Please enter valid email.";
    }
    else if(!LPform.userpassword.$valid) {
        $scope.allow_Invalid = "true";
        $scope.server_message = "Please enter valid password.";
    }
    else{
        $scope.allow_Invalid = "true";
        $scope.server_message = "Request Failed.";
    }
  };

This part is in javascript file where I want to use the validations to decide whether to send a request to the server or not. The conditions I have used in the if else clause is not working, which I randomly tried btw. I am aware that I can disable Login button, however, I don't want to implement this that way.

Answer 1

I believe your problem is that the form name is bound to $scope and isn't a global variable.

In controller change

 LPform

To

 $scope.LPform