Question

我有一个带有一个输入字段的简单表单

    <form ng-submit="UsernameModalInstance.submitUsername()">
        <input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">        
    </form>

注意：此输入字段不允许输入或任何空格因此：我的ng-submit函数仅在满足这些要求时触发

这是我想要的功能

但是，还有另一种方式来提交表单！

在这个表格下面我有一个按钮：

<button class="btn btn-primary" title="You must enter a username to proceed" ng-click="UsernameModalInstance.submitUsername()" type="button">Submit Username</button>

ng-click激活与输入上的ng-submit相同的功能

但我希望此提交用户名按钮与表单输入具有相同的要求。

目前，单击该按钮将触发该功能，而不满足任何必须输入内容且没有空格的要求！

有办法做到这一点吗？

Answer 1

这是一个简单的例子。您可以将其与ng-submit一起使用，例如将onsubmit替换为ng-submit，如果您将提交按钮保留在ng-click元素

中，则不需要form

function submitUsername(){
  console.log("valid username");
  event.preventDefault();//just to so it works here might not need in your code
}

<form onsubmit="submitUsername()">
        <input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">    
        <button type="submit">Submit</button>
    </form>

在由输入要求约束的表单之外提交按钮

1 个答案: