html自动验证后用javascript验证html表单答案

【问题标题】：Validate html form with javascript after html automatic validationhtml自动验证后用javascript验证html表单
【发布时间】：2017-12-04 17:49:19
【问题描述】：

我必须制作一个包含姓名、年龄或电子邮件等字段的小表格。例如：

<input id="name" type="text" required/>

我的验证有问题，因为我想使用 html 的自动验证来检查所有带有所需标记的字段是否不为空，然后使用 javascript 验证某些字段（如电子邮件）。我有一个这样的提交输入元素：

<input type="submit" value="Submit" onclick="form.validate()" />

问题是 onclick 方法 (validate()) 总是在自动验证之前调用，而我想要做的是在自动验证结束后调用该方法（一切正常）。我用来测试的 javascript 如下所示：

"use strict";
class Form {
    constructor(){}
    validate(){
        alert("validate");
    }
}
var form = new Form();

始终显示警报，但不会显示自动验证。如果我没有将 onclick 标记及其方法放在提交按钮上，则自动验证有效。对我的问题有任何想法吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要在表单中使用指令ng-submit：

<form ng-submit="form.validate()" ng-controller="YourController">    
   <input type="text" ng-model="text" name="text" />
   <input type="submit" id="submit" value="Submit" />
</form>

https://docs.angularjs.org/api/ng/directive/ngSubmit https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action

继续摇摆！

【讨论】：

现在它首先进行自动验证，但是没有显示来自javascript的警报
所有输入都正确完成后会触发警报。
我正确填写了表单的所有字段，自动验证检查一切正确并提交表单，但javascript代码似乎没有执行，因为警报仍然没有显示。跨度>
@novayhulk14 这使用了我非常喜欢的 angularjs，但它没有使用 vanilla js，如果你的项目中没有包含 angular，ng-submit 将永远不会运行你的功能。

【解决方案2】：

此方法使用 jQuery。首先，您需要防止表单提交的默认操作，然后您可以进行验证，最后提交表单。下面的例子。

您的表格：

<form id="form">
    <input type="text" required>
    <input type="submit" value="Submit!">
</form>

Javascript（使用 jQuery）：

$('#form').submit(function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Validations go here */
    form.validate();
    alert('here');
    this.submit(); // If all the validations succeeded
});

JavaScript（原版）：

document.getElementById('form').addEventListener('submit', function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    /* Validations go here */
    alert('here');
    this.submit(); // If all the validations succeeded
});

【讨论】：