Question

我正在尝试创建一个表单，该表单可以更改登录和注册选项卡，但工作正常，但是我在代码中使用的验证无效。我已经创建了控制器，但是代码仍然无法正常工作。请查看代码，并提出问题和针对此问题的解决方案。

 <body ng-app="myApp" ng-controller="panelController as panel">


<div class="row no-gutters">
  <div class="col">
      <div class="container-fluid">
          <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand mx-auto" href="#"><img class="brand-image" 
src="images/recruitment.png">JobsFinder</a> 
         </nav>
          <div class="logo-text">
            <h3>The easiest way to get you new job</h3>
            <p>We offer 12000 jobs vacation right now</p>
        </div>
    </div>
   </div>

    <div class="col">
    <section>
        <div class="form animated flipInX">

            <ul class="tab-group">
                <li class="tab" ng-class="{active: panel.isSelected(2)}"><a 
   href ng-click="panel.selectTab(2)">Log In</a></li>
                <li class="tab" ng-class="{active: panel.isSelected(1)}"><a 
   href class="test" ng-click="panel.selectTab(1)">Sign Up</a></li>
            </ul>

            <div class="tab-content">
                <div id="signup" ng-show="panel.isSelected(1)" >   
                    <h3>Sign Up for Free</h3>

                  <form name="signupForm" class="signupForm" novalidate>

                      <div class="top-row">
                        <div class="field-wrap">
                            <input type="text" required autocomplete="off" 
    placeholder="First name" ng-model="fname">
                            <span style="color:red" ng- 
    show="signupForm.fname.$dirty && signupForm.fname.$invalid">
                                <span ng- 
     show="signupForm.fname.$error.required">First name is required.</span>
                            </span>
                        </div>

                        <div class="field-wrap">
                            <input type="text"required autocomplete="off" 
     placeholder="Last name" ng-model="lname">
                            <span style="color:red" ng- 
     show="signupForm.lname.$dirty && signupForm.lname.$invalid">
                                <span ng- 
      show="signupForm.lname.$error.required">Last name is required.</span>
                            </span>
                        </div>
                      </div>

                      <div class="field-wrap">
                        <input type="email" required autocomplete="off" 
 placeholder="Email" ng-model="signupemail">
                            <span style="color: indianred" ng- 
  show="signupForm.signupemail.$dirty && signupForm.email.$invalid">
                                <span ng- 
   show="signupForm.signupemail.$error.required">Email is required</span>
                                <span ng- 
   show="signupForm.signupemail.$error.email">Invalid email</span>  
                            </span>
                      </div>

                      <div class="field-wrap">
                        <input type="password"required autocomplete="off" 
  placeholder="Password" ng-model="signpassword">
                        <span style="color: indianred" ng- 
  show="signupForm.signpassword.$dirty && signupForm.signpassword.$invalid">
                            <span ng- 
 show="signupForm.signpassword.$error.required">Password is required</span>
                        </span>
                      </div>

                      <div class="field-wrap">
                        <input type="password"required autocomplete="off" 
   placeholder="Confirm password" ng-model="cpass">
                        <span style="color: indianred" ng- 
  show="signupForm.cpass.$dirty && signupForm.cpass.$invalid">
                            <span ng- 
  show="signupForm.cpass.$error.required">Password is required</span>
                        </span>
                      </div>

                      <button type="submit" class="button button-block" ng- 
  click="submit()" ng-disabled="signupForm.signpassword.$dirty && 
  signupForm.signpassword.$invalid || signupForm.signupemail.$dirty && 
  signupForm.signupemail.$invalid || signupForm.cpass.$dirty && 
   signupForm.cpass.$invalid"/>Get Started</button>

                  </form>
                </div>

                <div id="login"  ng-show="panel.isSelected(2)" >   
                    <h3>Welcome Back!</h3>

                      <form class="loginForm" name="loginForm" novalidate>

                        <div class="field-wrap">
                            <input type="email"required autocomplete="off"  
 placeholder="Email"  ng-model="loginemail">
                            <span style="color: indianred" ng- 
 show="loginForm.loginemail.$dirty && loginForm.email.$invalid && 
 loginForm.loginemail.$touched">
                                <span ng- 
   show="loginForm.loginemail.$error.required">Email is required</span>
                                <span ng- 
    show="loginForm.loginemail.$error.email">Invalid email</span>  
                            </span>
                        </div>

                      <div class="field-wrap">
                        <input type="password"required autocomplete="off"  
    placeholder="Password"  ng-model="logpassword">
                        <span style="color: indianred" ng- 
     show="loginForm.logpassword.$dirty && loginForm.logpassword.$invalid">
                            <span ng- 
     show="loginForm.logpassword.$error.required">Password is required</span>
                        </span>
                      </div>

                      <p class="forgot"><a href="#">Forgot Password?</a></p>

                      <button class="button button-block" type="submit" ng- 
   click="submit()" ng-disabled="loginForm.logpassword.$dirty && 
    loginForm.logpassword.$invalid || loginForm.loginemail.$dirty && 
   loginForm.loginemail.$invalid"/>Log In</button>

                      </form>
                 </div>
            </div>   
        </div> 

     </section>
   </div>
    </div>

   <footer>
   <div class="text-center">
    <p>Copyright &copy; JobFinder 2017. Developed by Avneet Virk &amp; 
  Shubham Dobriyal</p>
  </div>
  </footer>


  <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
  <script src="js/panelController.js"></script>
  </body>

Answer 1

您尚未为输入指定任何名称。因此，它们的注册不正确，格式为该名称（缺少），因此signupForm.fname（例如）是不确定的。

Inputs must have a name：

<input name="fname" type="text" ... >

我创建了一个带有angularjs验证的表单，但未显示任何错误

1 个答案: