Form Validation on Button Click in AngularJS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

I have two fiels : one is username and other is password.

If an user enters wrong username or password, it must put up a error message below the respective fields.

Please refer me a solution in html of login form validation.

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="../Styles/images/icons/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../Styles/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../Styles/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../Styles/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
    <link rel="stylesheet" type="text/css" href="../Styles/fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="../Styles/css/animate.css">
    <link rel="stylesheet" type="text/css" href="../Styles/css/util.css">
    <link rel="stylesheet" type="text/css" href="../Styles/css/main.css">
</head>
<body style="background-color: #999999;">
    <div ng-show="loadingState">
        <div class="loading" id="loader"></div>
    </div>
    <!--<div id="loadingData">Location data here</div>
    <div id="find-me">Show my location</div><br />
    <p id="status"></p>
    <a id="map-link" target="_blank"></a>-->
    <div class="limiter">
        <div class="container-login100">
            <div class="login100-more" style="background-image: url('../Styles/images/bg-01.jpg');">
                <div class="login-cont">
                    <h5>Welcome to</h5>
                    <h1>ZetekCastings Pvt Ltd.</h1>
                    <p>Specialized in aluminium pressure die casting, through its unique manufacturing concept and outstanding engineering capability</p>
                </div>
            </div>
            <div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">               
                <form name="loginForm" class="login100-form validate-form" novalidate>
                    <span class="login100-form-title p-b-59">
                        User Login
                    </span> 
                    <div class="wrap-input100 validate-input" data-validate="Username is required">
                        <span class="label-input100">Username</span>
                        <input class="input100" type="text" name="username" placeholder="Username" ng-model="user.username" required autofocus>
                        <span class="focus-input100"></span>                       
                    </div>                   
                    <div class="wrap-input100 validate-input" data-validate="Password is required">
                        <span class="label-input100">Password</span>
                        <input class="input100" type="password" name="pass" placeholder="********" ng-model="user.password" required>
                        <span class="focus-input100"></span>                                               
                    </div>                    
                    <div class="container-login100-form-btn">
                        <div class="wrap-login100-form-btn">
                            <div class="login100-form-bgbtn"></div>
                            <button class="login100-form-btn" type="submit" ng-click="login(input)">
                                Login
                            </button>
                        </div>
                    </div>
                    <h6 class="pos-fixed bottom-0 mb-4 ml-5"> ZetekCastings @ 2019 All Rights Reserved.</h6>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

 

Posted 3 months ago

Hi skp,

Through html it is not possible to check wrong username or password.

You need to execute code and check with database for wrong username or password.

And it is correct to display wrong username or password error message below the respective fields.

You have to just display user as wrong username or password not the particular error.

If you want form validation then refer below article.

Form Validation AngularJS: Validate Form on Submit Button Click in AngularJS