I have a scenario,I have to validate the form on click of submit button,but I have a function with multiple error messages in a function using if condition.I have to display the respective error message below sign-in button.
HTML:
<form name="frmSignIn">
<div class="fginpt">
<div class="input-group grpsdn">
<div class="input-group-addon fginptg"><img src="images/rgemail.png" /> </div>
<input type="text" name="email" class="form-control sgfrmcntr" ng-model="signinCtrlAs.email" placeholder="{{signinCtrlAs.EmailPlaceholder}}" ng-required="true" ng-keypress="signinCtrlAs.keyPress()" ng-blur="signinCtrlAs.emailCheck()" ng-pattern="signinCtrlAs.emailRegexs" ng-class="{ 'eror' : frmSignIn.email.$invalid && frmSignIn.email.$touched}" />
</div>
<p class="vlderr" ng-if="frmSignIn.email.$invalid && frmSignIn.email.$dirty">{{signinCtrlAs.errorEmailMsg }}</p>
</div>
<div class="fginpt">
<div class="input-group grpsdn">
<div class="fginptrd input-group-addon fginptg"><img src="images/rpswrd.png" /> </div>
<input type="Password" name="password" class="form-control sgfrmcntr" ng-model="signinCtrlAs.password" placeholder="{{signinCtrlAs.PwdPlaceholder}}" ng-required="true" ng-keypress="signinCtrlAs.PwdKeyPress()" ng-blur="signinCtrlAs.pwdCheck()" ng-pattern="signinCtrlAs.pwdRegexs" ng-minlength="8" ng-maxlength="16" ng-class="{ 'eror' : frmSignIn.password.$invalid && frmSignIn.password.$touched}" >
<div class="input-group-addon fginptg"><img src="images/hde-pswrd.png" /> </div>
</div>
<p class="vlderr" ng-if="frmSignIn.password.$invalid && frmSignIn.password.$dirty">{{signinCtrlAs.errorPwdMsg }}</p>
</div>
<div>
<button ng-disabled="frmSignIn.email.$invalid || frmSignIn.password.$invalid" ng-class="{'sgninbtn':frmSignIn.$invalid, 'sgnbtnActv':frmSignIn.$valid}" novalidate ng-submit="frmSignIn.$valid && signinCtrlAs.SignIn()" >Sign In</button>
<p class="vlderr" ng-show="frmSignIn.$valid.$error.errMsg1">{{signinCtrlAs.errMsg1 }}</p>
<a href="/forgotpwd.html" class="sgnfpsw">I forgot password</a>
</div>
</form>
JS:
vm.SignIn = function () {
if ($scope.frmSignIn.$valid) {
//SignIn Service Called
signinSrvc.signInMember(vm.email, vm.password, function (response) {
alert(response);
if (response == 1)
//vm.errMsg("", null, 'This is not a registered email', null, "bgWht", 'Password');
vm.errMsg1 = "This is not a registered email";
else if (response == 2)
//vm.errMsg("", null, 'This is not a registered email', null, "bgWht", 'Password');
vm.errMsg2 = "This is not a registered email";
else if (response == 3) //or deleted
//alert("Your account has been suspended. Please contact our helpdesk for further information");
vm.errMsg3 = "Your account has been suspended. Please contact our helpdesk for further information";
//vm.errMsg = false;
else if (response == 4)
//vm.errMsg("", null, 'Please sign in with your social network', null, "bgWht", 'Password');
vm.errMsg4 = "Please sign in with your social network";
else if (response == 5)
//vm.errMsg("", null, 'Please sign in with your social network', null, "bgWht", 'Password');
vm.errMsg5 = "Please sign in with your social network";
else if (response == 6)
//vm.errMsg(vm.Kpcls, vm.email, vm.EmailPlaceholder, null, "", 'Incorrect password - please try again');
vm.errMsg6 = "Incorrect password";
else if (isNaN(response)) {
var loginType = $window.sessionStorage.getItem("loginType");
if (loginType == "DT") {
getSessionSrvc.setLoginData(response);
$('#signinCmtPop').modal('hide');
}
else {
$window.sessionStorage.removeItem("loginType");
getSessionSrvc.setLoginData(response);
$window.location.href = "/dashboard.html";
}
}
});
Here I have to display the error messages based on response, on click of signin button.