Как отменить изменения, сделанные DOM?

0

Поэтому я сделал простой механизм проверки формы javascript, который создает поле с сообщением об ошибке с использованием DOM. Но я не могу понять, как сбросить все эти изменения, когда я сброшу форму, используя <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>
  • 0
    Это будет зависеть от того, как вы создали коробки в первую очередь. Без какого-либо кода мы не сможем вам помочь.
Теги:
validation
forms
dom

2 ответа

2
Лучший ответ

Браузер не может волшебным образом выяснить, что нужно сделать для сброса пользовательских изменений.

Однако вы можете прослушать событие reset формы, используя element.addEventListener.

DEMO

HTML

<form id="test">
    <div id="errors-ct">The form has errors</div>
    <button type="reset">Reset</button>
</form>

JS

//wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
    //store a reference to the errors container div
    var errorsCt = document.getElementById('errors-ct');

    //listen to the reset event of the form
    document.getElementById('test').addEventListener('reset', function (e) {
        var form = e.target; //this is how you could access the form

        //hide the errors container
        errorsCt.style.display = 'none';
    });
});
  • 0
    Я отредактировал свой пост с кодом, который я написал. Я не могу понять, как вы это делаете, хотя. Не могли бы вы использовать приведенный выше пример, пожалуйста? Спасибо
  • 0
    @SabTheCoder Не могли бы вы показать реализацию функции validate ? Ваш код как есть потерпит неудачу, так как вы пытаетесь получить доступ к элементам DOM из сценария, который выполняется в заголовке документа, что означает, что ни один из элементов, к которым вы пытаетесь получить доступ, еще не существует.
Показать ещё 11 комментариев
1

Если вы хотите сбросить форму, как если бы пользователь не сделал каких-либо выборов или не добавил какой-либо ввод, просто установите значения всех элементов формы в их значение по умолчанию или пустое.

jsFiddle

<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");
    }

}
  • 0
    Это отличная альтернатива. Спасибо за это. Я попробую это :)
  • 0
    @SabTheCoder Я на самом деле не очень понимаю этот ответ. Весь код в resetForm кроме $("#err").text(""); кажется совершенно бесполезным, так как кнопка сброса уже сбросит поля формы к их первоначальному значению.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню