2

私は最近 jQuery を使い始めましたが、理解できないシナリオに遭遇しました。私はフロントエンドプログラミングにかなり慣れておらず、まだ学習中です。

必須の 2 つの入力テキスト フィールドを持つフォームがあります。
何も入っていない div があります。
3 つのリセット ボタン (Reset1、Reset2、Reset3) があります。

Reset1 - クリックすると、アクションを変更した後にフォームを送信し、すべての html 検証をバイパスします。
Reset2 - クリックすると、div に送信として名前と ID を持つ非表示の要素が追加され、アクションを変更した後にフォームが送信されます。これは、html 検証をバイパスしません。
Reset3 - クリックすると、submit1という名前の隠し要素が div に追加され、フォームが送信されます。これにより、すべてのhtml検証がバイパスされます

そのため、名前と ID を"submit"として非表示の要素を追加しようとすると、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>
4

0 に答える 0