即使表单永远不会被提交,也要使用html5验证?

时间:2012-02-14 05:53:02

标签: javascript jquery html5

我正在做的是在我的表单的提交按钮上捕捉点击操作,preventDefault(),进行一些计算,然后进行ajax调用,而不是提交表单。

即使表单未提交,有没有办法使用javascript强制启动html5验证器?

 $('#submitButton').click(function (e) {
        e.preventDefault(); //stop the form from submitting

        //Do computation

        $.post('/comments', values, function(results) {
            hideForm($('#new_comment_' + parentId));
            parent.children('.children').prepend(results);
        }, 'html');
    });

2 个答案:

答案 0 :(得分:8)

它运行得很好,我在最新的Chrome和Firefox中测试过。只需e.preventDefault()上的<form>

<强> HTML:

<form method="post" action="test.html">
    <input type="text" required></input>
    <input type="submit" value="Submit">
</form>

<强> JQ:

$('form').submit(function(e){ e.preventDefault(); });

示例: http://jsfiddle.net/elclanrs/2nnLc/2/

答案 1 :(得分:3)

使用html5约束,表单对象有一些新方法。例如,您可以在表单对象上调用checkValidity()来检查输入。

<form method="post" action="test.html" id="myForm">
    <input type="text" required></input>
    <input type="submit" value="Submit" id="submitButton">
</form>

<script type="text/javascript">
    $('#submitButton').click(function (e) {
        e.preventDefault();
        alert($("#myForm").get()[0].checkValidity());
    })
</script>