AngularJS登录验证错误信息不显示问题求助

Hey Krish, let's walk through what's causing your login form to skip validation and jump straight to next.html—it's a mix of typos and incorrect setup. Here's the breakdown and fixes:

Key Issues in Your Code #

• Angular Module Typo: You wrote angular.modul("demoApp",[]) instead of angular.module("demoApp",[]) (missing the final "e" in "module"). This breaks your controller entirely, so your validation function never runs.
• Misspelled length: Both validation checks use leggth instead of length. JavaScript doesn't recognize this property, so your error messages never trigger, and e.preventDefault() never stops the form submission.
• Invalid Script Tags: Your script tags have type set to file paths (like type="lib/angular.min.js"), which is wrong. You need to use the src attribute to load external scripts.
• Unnecessary Form Action: Keeping the action attribute means the browser will fall back to it if your JS fails, which is why it jumps to next.html even with validation issues.
• Missing Closing Form Tag: Your original HTML didn't close the <form> element, which can cause unexpected browser behavior.

Corrected Code #

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login Form</title>
<!-- Fixed script tags: use src instead of invalid type attributes -->
<script src="lib/angular.min.js"></script>
<script src="angularFile.js"></script>
</head>
<body ng-app="demoApp" ng-controller="Ctrl">
<h1>Login Form</h1>
<!-- Removed action attribute to let Angular handle submission -->
<form ng-submit="fun1($event)">
userName:<input name="name" ng-model="un">
<div style="color: red">{{msg1}}</div><br>
passWord:<input type="password" name="pwd" ng-model="pw">
<div style="color: red">{{msg2}}</div><br>
<input type="submit" value="Login"/>
</form> <!-- Added missing closing form tag -->
</body>
</html>

angularFile.js

// Fixed module name typo
var app = angular.module("demoApp",[]);
app.controller("Ctrl",function($scope){
    $scope.un="";
    $scope.pw="";
    $scope.msg1="";
    $scope.msg2="";
    
    $scope.fun1=function(e){
        // Reset error messages on each submission
        $scope.msg1 = "";
        $scope.msg2 = "";
        var isFormValid = true;

        // Fixed length spelling for username check
        if($scope.un.length === 0){
            $scope.msg1 = "please enter user name";
            isFormValid = false;
        }
        // Fixed length spelling for password check
        if($scope.pw.length === 0){
            $scope.msg2 = "please enter password";
            isFormValid = false;
        }

        // Only prevent form submission if there are errors
        if(!isFormValid){
            e.preventDefault();
        } else {
            // Redirect programmatically when validation passes
            window.location.href = "next.html";
        }
    }
});

What Changed? #

1. Fixed script loading to use src instead of invalid type attributes, ensuring Angular and your controller script load correctly.
2. Removed the form's action to avoid browser fallback submission, so we have full control via Angular.
3. Corrected typos that broke your Angular controller and validation checks.
4. Improved validation logic to reset messages on each submit, track form validity, and use programmatic redirect for better control.
5. Added the missing closing <form> tag to fix HTML structure issues.

Test this out, and your error messages should now show up when fields are empty, and the form will only redirect to next.html when both fields are filled.

内容的提问来源于stack exchange，提问作者Krish