我应该如何在 django 模板中使用 onsubmit 事件？答案

【问题标题】：How am i supposed to use onsubmit event in django template?我应该如何在 django 模板中使用 onsubmit 事件？
【发布时间】：2020-09-08 22:13:31
【问题描述】：

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

TypeError: document.getElementById(...) is null

html sn-p

<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>

这是我的 js sn-p

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

【问题讨论】：

标签： javascript html django templates

【解决方案1】：

您好，在您的var seats = document.getElementById("seats").value; 中调用了一个不存在的 id。

只需将 id 添加到您的选择元素，它应该可以修复您的错误。

例如：

<select autocomplete="off" id="seats" name="seats" >

【讨论】：