如何在 django 模板中使用 javascript

Question

I am using javascript for validating a form in django template, but it's not working,

the DOM events are not fetching the values. even if i give valid input to form the console says empty string

HTML snippet

<form onsubmit="return validate_hotel()" action="confirm_hotel/{{hotel_name}}" method="post">
    {% csrf_token %}
    <div id="left">
        <label>Check in date</label>
        <input id="checkin" type="date" autocomplete="off" name="checkin" > <br><br>
        <label>Number of guests</label><br>
        <select autocomplete="off"  name="guests" id="guests">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>                                       
        </select><br><br>
        <label>Username</label>
        <input id="HotelUsername" type="text"  name="username" autocomplete="off">
    </div>

    <div id="right">
        <label>Check out date</label>
        <input id="checkout" type="date" autocomplete="off" name="checkout"> <br><br>
        <label>Number of rooms</label><br>
        <select autocomplete="off">
            <option value="1">1</option>                                        
            <option value="2">2</option><br>
        </select><br><br>
        <label> password</label>
        <input id="password" type="password" autocomplete="off" name="password" >
     </div>
     <br><label id="hotel_error_message"> {{error_message}} </label><br>
     <button type="submit">Confirm booking</button>
</form>

here is the javascript function i am using to validate things. i am using document.getElementById() method to fetch the input values.

function validate_hotel()
{
    var hotel_username = document.getElementById("HotelUsername").value;
    var checkin = document.getElementById("checkin").value;
    var checkout = document.getElementById("checkout").value;
    var hotel_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 valid = true;
    console.log(hotel_username, checkin, checkout, hotel_password);
    if (! username_regx.test(hotel_username))
    {
        valid = false;
    }

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

    if (! date_regx.test(checkin))
    {
        valid = false;
    }

    if (! date_regx.test(checkout))
    {
        valid = false;
    }

    if (!valid)
    {
        document.getElementById("hotel_error_message").innerHTML = "Invalid inputs";
    }

    return valid;
};

Answer 1

Javascript code is executed by the browser (client side) and It is not related to backend (django etc...). Your code has no problem and works correctly.

To check javascript code I'm using Firefox debugger . It is possible to create break points in your javascript code and watch the variables to check if they get value or not.

• In Firefox browser, open debugger.
• Find the file that contains javascript code
• create some break points on some lines
• execute your code (submit the form)
• and then by hovering the mouse on your variables check if they get value or not. you can also add some watch to check variables.
• when your code is stopped at break points, checking the value of variables is also available in console.

Anyway, the code works correctly check if you have some elements with same name or something like this.