Django / JQuery：无法使用JQuery停止Django表单提交（preventDefault（）等无法正常工作）

Question

I'm trying to do some simple client-side validation because my form is really simple and just needs to know if all of its fields have been filled out.

Here is the relevant part of the template:

{% block content %}
 <form id="location_form" action="{% url "mountain_results" %}" method="GET">
    <h2>Enter your location</h2>
    <input id="location_autocomplete" placeholder="Enter your address" name="address"
    onFocus="geoLocate()" type="text"></input>

    <h2>Enter your maximum drive time</h2>
    <input name="drive_time"
    placeholder="Enter your maximum drive time (hours)" type="text"></input>

    <h2>Are you shredding today or tomorrow?</h2>
    <select name="shred_day">
        <option value="today">Today</option>
        <option value="tomorrow">Tomorrow</option>
    </select>
    <br>
    <button type="submit">Find me snow</button>
</form>
{% endblock content %}

Here is the relevant part of the JS:

$('#location_form').on('submit', function(event) {
    alert('dude you totally clicked');
    event.preventDefault();
    return false;
});

Interestingly, the alert doesn't even fire, so it feels like the event handler isn't even being triggered. Any thoughts? As you can see, I tried both commonly used methods of preventing the default event from firing to no avail.

Answer 1

You can use onsubmit event handler to validate the form.I have kep the action attribute empty for demo. You can add it along with onsubmit . Also is there any specific reason to for GET method. Here is a snippet.

HTML

<form id="location_form" action="" method="POST" onsubmit="return _validateForm()">
    <h2>Enter your location</h2>
    <input id="location_autocomplete" placeholder="Enter your address" name="address"
    onFocus="geoLocate()" type="text"></input>

    <h2>Enter your maximum drive time</h2>
    <input name="drive_time"
    placeholder="Enter your maximum drive time (hours)" type="text"></input>

    <h2>Are you shredding today or tomorrow?</h2>
    <select name="shred_day">
        <option value="today">Today</option>
        <option value="tomorrow">Tomorrow</option>
    </select>
    <br>
    <button type="submit">Find me snow</button>
</form>

JS

function _validateForm(){
 alert('dude you totally clicked');
}

Here is a DEMO .Hope this will be helpful

Answer 2

Here is the another approach. Change

<button type="submit">Find me snow</button>

With

<button id="submit_form">Find me snow</button>

and add following JavaScript code

$('#submit_form').click(function(){
    if(for_is_valid()){
       $('#location_form').submit();
    }
    else{
       alert('Your message');
    }
});

Hope this will work.