Javascript 我应该如何在django模板中使用onsubmit事件?

Javascript 我应该如何在django模板中使用onsubmit事件?,javascript,html,django,templates,Javascript,Html,Django,Templates,我正在使用django创建一个网站,我添加了一些js进行验证,但它不起作用。每当我运行代码时,它都会显示 TypeError:document.getElementById(…)为空 html代码段 <form onsubmit=" return validate_bus()" action="confirm_bus/{{busname}}" method="post"> {% csrf_token %} <div id="left"> &l

我正在使用django创建一个网站,我添加了一些js进行验证,但它不起作用。每当我运行代码时,它都会显示

TypeError:document.getElementById(…)为空

html代码段

<form onsubmit=" return validate_bus()" action="confirm_bus/{{busname}}" method="post">
    {% csrf_token %}
    <div id="left">
       <label>Departure date</label>
       <input type="date" autocomplete="off" name="date" id="departuredate"> <br><br>
       <label>Username</label>
       <input type="text" name="username" id="BusUsername" autocomplete="off">
    </div>

    <div id="right">
       <label>Number of seats</label><br>
       <select autocomplete="off" name="seats" >
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <br>
       </select><br><br>
       <label> password</label>
       <input type="password" autocomplete="off" name="password" id="password">
    </div>
    <label id="error_message">{{error_message}}</label><br>
    <button type="submit">Confirm booking</button>
</form>

您好,您的
var seats=document.getElementById(“seats”).value调用不存在的id

只需将id添加到select元素中,它就可以修复错误

例:


function validate_bus()
{
    var date = document.getElementById("departuredate").value;
    var username = document.getElementById("BusUsername").value;
    var seats = document.getElementById("seats").value;
    var password = document.getElementById("password").value;
    var date_regx = /^(19|20)\d\d([- /.])(0[1-9]|1[012])\2(0[1-9]|[12][0-9]|3[01])$/
    var username_regx = /^[a-zA-Z0-9_$.@]+$/
    var password_regx = /^(?=.*\d).{4,12}$/
    var seats_regx = /[1-6]{1}/
    var valid = true
    console.log(date, username, seats, password);
    if (! date_regx.test(date))
    {
        valid = false;
    }

    if (! username_regx.test(username))
    {
        valid = false;
    }

    if (! seats_regx.test(seats))
    {
        valid = false;
    }

    if(! password_regx.test(password))
    {
        valid = false;
    }

    if (!valid)
    {
        var error = document.getElementById("error_message").innerHTML = "invalid input";
    }
    console.log(valid)
    return valid;
};
<select autocomplete="off" id="seats" name="seats" >