在由输入要求控制的表单之外提交按钮

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 一起使用，即用ng-submit 替换onsubmit，如果您将提交按钮保留在form 元素中，则不需要ng-click

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>