HTML5 必填字段并使用 angularjs 提交答案

【问题标题】：HTML5 required field and submit with angularjsHTML5 必填字段并使用 angularjs 提交
【发布时间】：2014-03-07 18:51:46
【问题描述】：

如何在 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”，然后我收到来自谷歌浏览器的消息：“请填写此字段...”

如何在提交前检查输入？

【问题讨论】：

你能粘贴saveDelivery函数的代码吗？
我的函数很简单： $scope.saveDelivery = function (newDelivery){ alert("pass before submit ?"); $http.post('webservice/rest/delivery/add',newDelivery).success(function(){ alert("你很幸运：它成功了！！"); }); }
在您的警报呼叫之前，您可以添加验证检查
是的，但它不是 HTML5...
查看AngularJS form validation。可能有帮助

标签： javascript html forms angularjs twitter-bootstrap

【解决方案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>

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

Angular 让向任何表单添加验证变得非常容易。一旦验证通过，Angular 就会触发你的 saveDelivery 方法！

【讨论】：

【解决方案2】：

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

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

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

例如this answer to another post显示了如何处理表单提交并防止它发生；如果您想调用 saveDelivery 方法进行实际保存但不希望表单回发，这可能很有用

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

【讨论】：

好的好的，我需要重新加载页面吗？
不，我是说您当前的点击处理程序将在浏览器运行验证之前发生；但是，如果您只是让它开始提交表单，则应该进行验证，一旦表单被认为是有效的，表单提交事件就会触发......在这种情况下，您可以执行 saveDelivery 方法，您甚至可以取消如果需要，请在此时提交（即 saveDelivery 可能会完成所需的所有操作）表单提交在您的 saveDelivery 调用完成之前不会发生，并且只有在您不取消它时才会发生这有帮助吗？
我想使用 HTML5 w3schools.com/tags/att_input_required.asp 的必需属性。你知道吗？
是的，我知道。您想知道在浏览器验证所需属性之后但在提交表单之前如何调用您的函数吗？我不明白您在上述评论中的问题，因为我已经表明我已经知道所需的属性是什么。我的回答只是将您的 saveDelivery 调用移动到 onsubmit 而不是您拥有它的位置，并且 chrome 将在您的 saveDelivery 调用完成之前进行验证......看起来您的问题会得到解决吗？不是吗？那不行吗？您能就您遇到的其他问题给我反馈吗？
好的，我现在明白了。感谢您的帮助；）我读得太快了您的第一个答案。它现在正在工作。