Question

如何在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的消息：“请填写此字段......”

如何在提交前检查输入？

Answer 1

查看ng-submit指令。

这基本上以您定义的形式查找标记中定义的任何验证（必需，类型）。您所要做的就是点击您的点击操作，并将其放在表格顶部的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>

由于您的按钮被定义为类型＆＃39;提交＆＃39;，这将提交表单，预先形成“点击”按钮。为你行动。 Angular将基本上劫持提交，并在将表单提交给“saveDelivery”之前验证您的表单。您所要做的就是定义您要验证的内容，是否需要＆＃39;输入，或者你输入=＆＃34;电子邮件＆＃34;在您的输入上，它将使用HTML 5电子邮件验证并确保它是一个电子邮件地址。

Angular非常容易为任何表单添加验证。验证通过后，Angular将触发saveDelivery方法！

Answer 2

编辑：2014-02-12 - 这是一个非常简单的例子。当输入字段中没有任何内容时，请尝试单击“提交”按钮。 Chrome会显示验证消息，输入内容并运行警报，但表单不会提交。示例：http://plnkr.co/edit/uGT3scGJtCVJkWE0B7zp?p=preview

浏览器会在提交表单时进行验证我认为（注意：未经验证，这只是我对事件流程的了解。我可能错了）

您可能希望处理表单提交事件以执行saveDelivery调用，因为（表单提交）应该在验证之后但在表单实际发回之前发生。 saveDelivery将在表单提交之前完成，如果需要也可以取消它并做自己的事情......

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

https://stackoverflow.com/a/5384732/94099

HTML5必填字段并使用angularjs提交

2 个答案: