Question

我的页面中有多个forms，一个按钮收集所有这些数据，通过AJAX调用处理它，然后使用结果显示一些内容。现在我最初使用forms（虽然我实际上从不使用直接提交它们/ action）来使用内置的velidators，例如input type number或required。这显然不起作用，因为我从不提交forms。有没有办法手动调用表单的验证例程，只有在满足后才能继续？

Answer 1

如果表单元素中的所有元素都有效，则表单元素上的reportValidity方法返回true。许多浏览器都不支持它，因此您可以使用polyfill：

if(!HTMLFormElement.prototype.reportValidity){
    HTMLFormElement.prototype.reportValidity = function(){
        for(var i = 0;i < this.elements.length;i++){
            if(!this.elements[i].checkValidity()){
                return false;
            }
        }
        return true;
    };
}

Answer 2

一个表单验证示例

HTML：

<form id="myForm" name="myForm">
    <input type="submit" id="realSubmit" value="submit" style="display: none;" />

    <button type="button" id="customSubmit">Validate</button>
</form>

的javascript：

$('#myForm').on('submit', function(e) {
    e.preventDefault();

    return false;
});

$('#customSubmit').click(function() {
    // This will run html validations.
    $('#realSubmit').click();
});

我希望这可以帮到你。

使用一个按钮提交（防止默认）多个表单

2 个答案: