必填字段单击图像按钮时输入验证

Question

当我在 button 和 type submit 上进行验证时，验证工作正常。但是，我有一个图像，对我来说就像一个图像按钮，我希望在用户单击图像之前填写项目名称。有人可以帮我实现这个吗？

  <form name="userForm">
            <table>
                <tr>
                    <td>
 <%-- <button type="submit" data-ng-click="addAnswers($event)" data-ng-disabled="userForm.$invalid">Save</button>--%>
                    <img src="/SaveBttn.png"
                            style="width: 100px; height: 50px;" data-ng-click="addAnswers($event)" />
                    </td>
                    <td>
                        <img alt="" onclick="Close()" src="/Close.png"
                            style="width: 100px; height: 50px;" />
                    </td>
                </tr>
            </table>
            <div>
            <input type="text" required name="ProjectName" placeholder="ProjectName"  data-ng-model="name" maxlength="250" style="width: 400px;" />
            </div>  
</form>

Answer 1

如果这不起作用，只需将其包装在 <a>

中

<a data-ng-click="addAnswers($event)" style="text-decoration: none !important">
     <img src="/SaveBttn.png" style="width: 100px; height: 50px;" />
</a>

Answer 2

您必须在 addAnswers 操作中设置有效性。

var app = angular.module("app",[]);

app.controller("ctrl",function($scope){
  
  $scope.name = "";
  $scope.addAnswers = function($event,userForm){
    
    if($scope.name == ""){
       $scope.userForm["ProjectName"].$setValidity('empty', false);
      }
    else{
       $scope.userForm["ProjectName"].$setValidity('empty', true);
     
      }
    
    }
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="userForm">

                <table>
                    <tr>
                        <td>
                        <img src="/SaveBttn.png"
                                style="width: 100px; height: 50px;" data-ng-click="addAnswers($event)" />
                        </td>
                        <td>
                            <img alt="" onclick="Close()" src="/Close.png"
                                style="width: 100px; height: 50px;" />
                        </td>
                    </tr>
                </table>
        <div>
        <input type="text" required name="ProjectName" ng-model="name" placeholder="ProjectName" />
          <span ng-show="userForm.ProjectName.$error.empty">This feild is empty.</span>
</div>           
  </form>
  </div>

必填字段单击图像按钮时输入验证

Required field Validation on input on image button click

angularjs

angularjs-validation

必填字段 单击图像按钮时输入验证

Required field Validation on input on image button click

angularjs

angularjs-validation

必填字段单击图像按钮时输入验证