Не работает проверка ввода onsubmit

265

29 мая 2017, 23:11

Всем доброго дня. У меня есть html-форма, которую нужно проверять перед отправкой. Для этого я использовал событие "onsubmit". Если определённое поле пусто, выскакивает алерт и форма не отправляется.

Затем я стал изменять этот код для того, чтобы не выскакивало сообщение, а вместо этого поле просто подсвечивалось красным цветом. В процессе работы, я вернулся к варианту с alert и внезапно всё перестало функционировать.

Если просто поставить alert в функцию, будет выводиться сообщение при отправке формы. То есть onsubmit работает. Но вот алгоритм ветвления "if else" почему-то нет. Затем оказалось, что код почему-то не видит, что поле "surname" пусто. Я убрал проверку на это поле и всё заработало с другими полями. Но через некоторое время и это перестало работать. Причём в коде я вроде бы ничего не менял. Оно просто перестало работать. Никак не могу понять в чём дело.

Второй скрипт на этой странице, который делает ajax-запрос работает исправно. Вот мой код:

<!DOCTYPE HTML> 
 
<html> 
    <head> 
        <meta charset="utf-8"> 
    </head> 
    <title>comment</title> 
<body> 
    <p> 
        <a href="/">Главная</a> 
    </p> 
   <form action="comment" id="comment" method="get"> 
        <p>             
            <input "name="surname" placeholder="Фамилия" type="text"/> 
        </p>      
        <p>             
            <input name="user_name" placeholder="Имя" type="text"/> 
        </p> 
        <p>             
            <input name="middle_name" placeholder="Отчество" type="text"/> 
        </p> 
        <p> 
            <!-- id="region"--> 
            %(get_region)s 
            <!-- id="city"-->    
            %(get_city)s 
        </p> 
         
        <p>             
            <input name="phone" placeholder="Контактный телефон" type="text"/> 
        </p> 
        <p>             
            <input name="email" placeholder="Email" type="text"/> 
        </p> 
        <p> 
            <textarea rows="10" cols="45" name="user_comment" placeholder="Комментарий" type="text"></textarea> 
        </p> 
        <p> 
            <input type="submit" value="Отправить"> 
        </p> 
    </form> 
 
    <script type="text/javascript">  
        var form = document.getElementById('comment'); 
        form.onsubmit = function { 
             
            if (form.surname.value == '') 
            { 
                alert("Введите фамилию!"); 
                return false; 
            } 
            else if (form.user_name.value == '') 
            { 
                alert("Введите имя!"); 
                return false; 
            } 
            else if (form.user_comment.value == '') 
            { 
                alert("Введите комментарий!"); 
                return false; 
            } 
            return true; 
        }; 
    </script> 
 
    <script type="text/javascript"> 
        var region = document.getElementById('region'); 
        region.onchange = function() { 
            
            var xhr = new XMLHttpRequest(); 
             
            xhr.open('GET', '/get_city?region=' + region.value, true); 
 
            xhr.send(); 
 
            xhr.onreadystatechange = function() { 
                if (xhr.readyState != 4) return; 
     
                if (xhr.status != 200) { 
                    alert (xhr.status + ':' + xhr.statusText); 
                 } else { 
                   document.getElementById('city').innerHTML = xhr.responseText;       
                 }         
            } 
        } 
    </script> 
 
</body> 
</html>