0

そこで、DOM を使用してエラー メッセージを含むボックスを作成する単純な JavaScript フォーム バリデーターを作成しました。しかし、次を使用してフォームをリセットするときに、これらすべての変更をリセットする方法がわかりません <button type="reset">

それがどのように行われたか知りたいです。

ありがとう。

コード

<html>
    <head>
        <script type="text/javascript">
                   function validate(){
            var fname = document.getElementById("fname");
            var surname = document.getElementById("surname");

            if(fname.value === "" || fname.value === null){ 
                document.getElementById("sbody").style.display = "block";
                document.getElementById("fname").style.display = "block";               
                return false;   
            }

            //Verify Last Name
            if(surname.value === "" || surname.value === null){
                document.getElementById("sbody").style.display = "block";
                document.getElementById("surname").style.display = "block";
                return false;
            }
                   }//End Validate Function
        </script>


        <style type="text/css">
            #sbody{
                width: 100px;
                height: 100px;
                background-color: #f3f3f3;
                display:none;
            }

            .vis{
                display: none;
                font-size: 12px;
            }
        </style>
    </head>

    <body>
        <section id="sbody">
            <span id="fner" class="vis">First Name is missing.</span>
            <span id="lner" class="vis">Surame is missing.</span>
        </section>              

        <form id="registerForm" method="POST" action="register.php" onsubmit="return validate()">
            <label for="fname" class="labelStyle">First Name: </label>
            <input id="fname" name="fname" type="text" value="">

            <label for="surname" class="labelStyle">Surname: </label>
            <input id="surname" name="surname" type="text" value="">    

            <button type="submit">Sign Up</button>
            <button type="reset">Reset</button>
        </form> 
    </body>
</html>
4

2 に答える 2

1

ユーザーが選択を行っていないか、入力を追加していないかのようにフォームをリセットする場合は、すべてのフォーム要素の値をデフォルト値または空に設定します。

jsフィドル

<div>
    <form action="/echo/html" method="get">
        <input type="text" placeholder="username" />
        <br/>
        <input type="password" placeholder="password" />
        <br/>
        <input type="checkbox" value="test" data-default="checked" checked="checked"/>
        <br/>
        <button type="reset" value="reset" onclick="resetForm()">reset</button>
        <br/>
    </form>
    <div id="err">Some error message</div>
</div>


window.resetForm = function () {
    var fields = $('input'),
        uname, pass, check;
    uname = $(fields.get(0));
    pass = $(fields.get(1));
    check = $(fields.get(2));
    $("#err").text("");
    uname.val('');
    pass.val('');
    if (check.attr("data-default") == "checked") {
        check.attr("checked", "checked");
    } else {
        check.removeAttr("checked");
    }

}
于 2013-11-10T14:33:02.307 に答える