ng-show没有工作角形式验证

时间:2017-01-14 06:05:00

标签: angularjs

我试图在验证后显示错误消息。后端是php,它返回我可以在网络选项卡中看到的数据。

以下是代码。 function formRegister($ scope,$ http){

        // create a blank object to hold our form information
        // $scope will allow this to pass between controller and view
        $scope.formData = {};

            $scope.registerForm = function() {
            $http({
                method  : 'POST',
                url     : 'registerexec.php',

                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)

            })
                .success(function(data) {
                    console.log(data);

                    if (!data.success) {
                        // if not successful, bind errors to error variables
                        //{{$scope.errorFname}}
                        $scope.erroracType = data.errors.actype;
                        $scope.errorFname = data.errors.Fname;
                        $scope.errorLname = data.errors.Lname;
                        $scope.errorEmail1 = data.errors.email1;
                        $scope.errorPassword1 = data.errors.password1;
                        $scope.errormobile = data.errors.mobile;
                        $scope.message1 = data.message1;

                    }
                });

        };

    }

这是表格。

<div class="feature-box wow animated flipInX animated">

<div id="validation-errorss" ng-show="message1" ><div class="alert alert-danger"><strong >{{ message1 }}</strong><div></div></div>
</div>
<div class="panel-body" id="success"></div>
    <font size="4" color="#fff">Register</font>
<form name="register" method="post" id="register" role="form" ng-submit="registerForm()">
<div class="form-group" ng-class="{ 'has-error' : erroractype }">    
        <select id="actype" name="actype" class=" selector form-control" ng-model="formData.actype" required="required"> 
           <option value="" selected="selected" >I am</option>
          <option value="1">a user</option>
          <option value="2">an admin</option>
        </select>
<span class="help-block" ng-show="errorName">{{ erroractype }}</span>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorFname }">

<input type="text" id="fname" name="fname" placeholder="First Name" title="Please Enter Your First Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Fname">
<span class="help-block" ng-show="errorFName">{{ errorFname }}</span>

</div>

<div class="form-group" ng-class="{ 'has-error' : errorLname }">
<input type="text" id="lname" name="lname" placeholder="Last Name" title="Please Enter Your Last Name" class="form-control input-sm textbox1" required="required" ng-model="formData.Lname">
<span class="help-block" ng-show="errorLName">{{ errorLname }}</span>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorEmail1 }">
<input type="email" id="email1" name="email1" placeholder="Email" class="form-control input-sm textbox1" title="Please Enter Your Valid Email" required="required" ng-model="formData.Email1">
<span class="help-block" ng-show="errorEmail1">{{ errorEmail1 }}</span>
</div>

<div class="form-group" ng-class="{ 'has-error' : errorPassword1 }">
<input type="password" name="password1" id="password1" placeholder="Password" title="Please enter AlphaNumeric value" class="form-control input-sm textbox1" required="required" ng-model="formData.Password1">
<span class="help-block" ng-show="errorPassword1">{{ errorPassword1 }}</span>
</div>

<div class="form-group" ng-class="{ 'has-error' : errormobile }">
    <input type="text" id="mobile" name="mobile" placeholder="Mobile Number (Without +91)" title="Please Enter Your Contact Number without Coutry Code." class="form-control input-sm textbox1" required="required" ng-model="formData.mobile">
    <span class="help-block" ng-show="errormobile">{{ errormobile }}</span>
 </div>

<div class="form-group">
<button type="submit" class="btn btn-home" name="btn-register" id="btn-register" required="required">Register</button>
</div>
</form>

问题是在后端验证表单的时候。数组消息未显示在。

以下是在firebug中发现的验证错误。

  

错误:对象Fname:&#34;您的名字必须介于3到30之间

     

字符&#34!; Lname:&#34;您的姓氏必须在3到30之间

     

字符&#34!;密码1:&#34;您的密码必须在6到30之间

     

字符&#34!;成功:假

1 个答案:

答案 0 :(得分:0)

将novalidate属性添加到表单标记

<form novalidate> 

如果您打算进行自己的客户端验证,如果您想创建自己的验证泡沫,或者计划进行所有服务器端验证(无论如何都需要这样做),则可以使用此方法。< / p>