Javascript HTML5必填字段并与angularjs一起提交

在用javascript提交表单之前，如何检查表单的必填字段

我和Angularjs一起工作，你可能知道，我从不重新加载页面。 我创建了如下输入文本：

<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>

这是表单末尾的“提交”按钮：

<button type="submit" ng-click="saveDelivery(newDelivery)" class="btn btn-primary">Create the delivery</button>

创建交付

但当我提交时，我首先进入“saveDelivery”，然后我收到了来自Google chrome的消息：“请填写此字段…”

---

提交前如何检查输入？

编辑：2014-02-12-以下是一个非常简单的示例。当输入字段中没有任何内容时，请尝试单击“提交”按钮。Chrome将显示验证消息，输入内容，警报将运行，但表单不会提交。 例如：

我想在提交表单时浏览器会进行验证（注意：未验证，这只是我理解事件流的方式。我可能错了）

您可能希望处理表单提交事件来执行

saveDelivery

调用，因为（表单提交）应该在验证之后、表单实际发回之前发生。saveDelivery将在表单提交之前完成，如果需要，您也可以取消它并执行自己的操作

例如，对另一篇文章的回答显示了如何处理表单提交并防止其发生；如果您想调用saveDelivery方法进行实际保存，但又不想回发表单，那么这可能很有用

查看该指令

<form ng-submit="saveDelivery(newDelivery)">
    <input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
    <button type="submit" class="btn btn-primary">Create the delivery</button>
</form>

这实际上是在定义的表单中查找标记中定义的任何验证（必需，类型）。您只需执行单击操作，并将其放置在ng submit指令中表单的顶部

<form ng-submit="saveDelivery(newDelivery)">
    <input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
    <button type="submit" class="btn btn-primary">Create the delivery</button>
</form>

创建交付

因为您的按钮被定义为“提交”类型，这将提交表单，为您执行“ng click”操作。Angular实际上会劫持提交，并在将表单提交到“saveDelivery”之前验证表单。您所要做的就是定义您想要验证的内容，无论是“必需”输入，还是在您的输入上键入=“电子邮件”，它都将使用HTML 5电子邮件验证并确保它是电子邮件地址

---

Angular使向任何表单添加验证变得非常容易。一旦验证通过，Angular将触发您的saveDelivery方法

你能粘贴

saveDelivery

function的代码吗？我的函数很简单：$scope.saveDelivery=function（newDelivery）{alert（“提交前通过？”）；$http.post（'webservice/rest/delivery/add'，newDelivery。）success（function（）{alert（“你很幸运：它是woorks！！”）；}）在您的警报呼叫之前，您可以添加验证检查，但这不是HTML5…请检查。可能会有帮助好的，那么我需要重新加载页面吗？不，我是说当前的单击处理程序将在浏览器运行验证之前发生；但是如果您只是让它开始提交表单，那么应该进行验证，一旦表单被判定为有效，表单提交事件将触发。。。在这种情况下，您可以使用

saveDelivery

方法，如果需要，您甚至可以在此时取消提交（即saveDelivery可以完成所有需要的操作）表单提交在您的saveDelivery呼叫完成之前不会发生，只有在您不取消的情况下才会发生。这有帮助吗？我想使用HTML5的required属性。你知道吗？是的，我知道。您想知道如何在浏览器验证所需属性后但在提交表单之前调用函数是吗？我不理解您在上述评论中的问题，因为我已经表明我已经知道所需的属性是什么。我的答案是简单地将您的saveDelivery呼叫移动到onsubmit，而不是您的位置，chrome将在您的saveDelivery呼叫完成之前进行验证。。。看来你的问题到时候就能解决了？不是吗？那不行吗？你能给我反馈你还有什么问题吗？好的，我现在明白了。谢谢你的帮助；）你的第一个答案我读得太快了。它正在工作。