当添加名为submit的隐藏元素时,jquery表单提交会跳过html5验证

时间:2013-11-20 08:59:17

标签: javascript jquery html5 jquery-ui html5-validation

我最近开始玩jQuery并遇到了一个我无法理解的场景。我对前端编程很新,还在学习。

我有一个表单,其中包含两个输入文本字段 我有一个没有任何内容的div 我有3个复位按钮(Reset1,Reset2& Reset3)。

Reset1 - 单击后,在更改操作后提交表单并绕过所有html验证 重置2 - 单击时,在div中添加名称和ID为提交的隐藏元素,然后在更改操作后提交表单。这并没有绕过html验证 Reset3 - 单击时,在div中添加名为 submit1 的隐藏元素并提交表单。这绕过了所有的html验证

因此,当我尝试添加名称和ID为"提交" 的隐藏元素时,我无法找到为什么不会绕过html验证的原因。

如果我使用与提交不同的名称添加任何其他隐藏元素,则它会绕过所有html验证。

代码如下:JsFiddle - http://jsfiddle.net/sumitk1/pRY4u/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('#reset1').button().click(function(){
            // The below line submits the form without validation check
            $("#myForm").attr("action", "test1.html").submit();
        });
        $("#reset2").button().click(function(){
            // The below 2 line always wait for validation check
            $("#hiddenDiv").append('<input type="hidden" name="submit" id="submit" value="reset"/>');
            $("#myForm").attr("action", "test2.html").submit();
        });
        $("#reset3").button().click(function(){
            // The below 2 line always wait for validation check
            $("#hiddenDiv").append('<input type="hidden" name="submit1" id="submit1" value="reset"/>');
            $("#myForm").attr("action", "test3.html").submit();
        });

    });
</script>


</head>
<body>

<form id="myForm" name="myForm" action="some.html" method="post">

    <input id="textBox1" name="textBox1" type="text" required="required" title="text1"><br/>
    <input id="textBox2" name="textBox2" type="text" required="required" title="text2"><br/>

    <div id="hiddenDiv" name="hiddenDiv"></div>

    <input id="reset1" name="reset1" type="submit" value="Reset1">
    <input id="reset2" name="reset2" type="submit" value="Reset2">
    <input id="reset3" name="reset3" type="submit" value="Reset3">

</form>

</body>
</html>

0 个答案:

没有答案