After ajax validation, the form is submitted.
Be careful:
(1) The form in html cannot use submit, but button,
(2) At the same time, the id and name of the button cannot be "submit", otherwise it will fail.
(3) Form needs an ID (for example, id = "formid") to find the corresponding form in ajax.
Code in form
<form action="{% url 'App:login' %}" method="post" id="formid">
{% csrf_token %}
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4">
<span><h2>Sign in</h2></span>
<div class="form-group required">
<label class="control-label" for="name">User name</label>
<input class="form-control" id="name" maxlength="10" name="name"
placeholder="enter one user name" required type="text" value="">
</div>
<div class="form-group required">
<label class="control-label" for="password">Password</label>
<input class="form-control" id="password" maxlength="16" name="password"
placeholder="Please input a password" required type="password" value="">
</div>
<input class="btn btn-default" id="button" name="button" type="button" value="Sign in"
onclick= "checkfunction()">
</div>
</div>
</form>
After clicking the submit button in the form, the function checkfunction () will be triggered to submit the data to the check login view function through ajax for verification and return json data. If 200 is returned, execute document.getElementById('formid '). submit() to submit the form. The form submitted to the login view function saves the data to the database.
ajax Code in
function checkfunction() {
$.post({% url 'App:check_login' %}, {
"username": usernamenode.val(),
'userpassword': userpasswordnode.val()
}, function (data, status) {
console.log(data.code, status);
if (data.code == 200) {
alert('Landing successfully');
document.getElementById('formid').submit()
{# window.location.href='/' #}
}
else if (data.code == 404) {
alert("user does not exist")
}
else{
alert("Please enter the correct password")
}
})
}