maintain focus in django form when displaying errors - django

Question

I have a home view with a form as footer to contact. Everything works fine, except that when there is some error in the form and the view redisplays everything with the corresponding errors, it doesn't keep the focus in the form (it shows the view as though you were entering for the first time, and so users can't see their form wasn't correct unless they scroll down).
I had thought of sending a message with JS, but it is really ugly.
I have tried with all the ways I have found to display errors ( raising them from different functions) but the problem persists.
Any idea?
Besides, even though I set required = False, the form keeps showing a message ("Complete this field") which I think comes from html, how can I remove it?
Thank you very much!
Code:
<form method="post">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.message.errors }}
<label for="{{ form.message.id_for_label }}">Your message:</label>
{{ form.message }}
</div>
<div class="fieldWrapper">
<strong>{{ form.mail.errors }}</strong>
<label for="{{ form.mail.id_for_label }}">Your email address:</label>
{{ form.mail }}
</div>
<div class="fieldWrapper">
{{ form.number.errors }}
<label for="{{ form.number.id_for_label }}">CC yourself?</label>
{{ form.number }}
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
class ContactForm(forms.Form):
mail = forms.CharField(required=False, label=_('Mail'))
number = forms.CharField(required=False, label=_('Number'))
message = forms.CharField(min_length = 0, max_length=500, label=_('Message'))
def clean_mail(self):
mail = self.cleaned_data['mail']
if '#' not in mail:
raise ValidationError({"mail": _('The mail should contain "#"')})
return mail

Answer 1

Any idea?
I have an idea using jquery validation plugin, but I'm not sure if you can use it in your project. It is very simple to integrate with django error messages (error_messages). Let me explain you.
First: Function in JavaScript to check if you need to send csrf:
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
Second: Function in JavaScript if you need to show generic errors (non field errors) dynamically.
function showGenericErrors(errorMessages, id) {
len = errorMessages.length
if (len > 0) {
errorDiv = `
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>`;
for (var i = 0; i < len; i++) {
errorDiv += errorMessages[i];
errorDiv += (i === len-1) ? '' : '<br>';
}
errorDiv += '</div>';
$(errorDiv).insertAfter($('SOME_ELEMENT_OF_YOUR_PREFERENCE'));
}
}
Third: Django response with JsonResponse in your view (remember -> from django.http import Json response).
return JsonResponse({'messages': form.errors}, status=500, safe=False)
Fourth: Activating jquery validation plugin and handle your submit event with ajax to send data to Django for validation purpose.
form = $('form');
var $validator = $(form).validate({
rules: {
mail: {
required: true,
email: true
},
number: {
required: true,
minlength: 7,
maxlength: 15
},
message: {
required: true,
maxlength: 500
},
},
messages: {
mail: {
required: 'Mail required',
email: 'Invalid mail'
},
number: {
required: 'Number required',
minlength: 'Please enter at least {0} characters', //{0} will take the minlength specified in rules
maxlength: 'Please enter no more than {0} characters'
},
message: {
required: 'Message required',
maxlength: 'Please enter no more than {0} characters'
},
},
submitHandler: function(form) {
$('.alert').remove();
var formData = new FormData(form);
$.ajax({
url: 'contactus',
type: 'POST',
data: formData,
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader('X-CSRFToken', $('[name=csrfmiddlewaretoken]').val());
}
},
success: function(data) {
console.log(data);
},
error: function(xhr) {
console.log(xhr.responseJSON);
data = xhr.responseJSON;
if (data.messages) {
genericErrors = [];
fieldErrors = {};
for (var i in data.messages) {
if (i === '__all__') {
genericErrors = data.messages[i];
} else {
fieldErrors[i] = data.messages[i][0];
}
}
$validator.showErrors(fieldErrors);
showGenericErrors(genericErrors, id);
}
},
cache: false,
contentType: false,
processData: false
});
},
errorElement: "em",
errorPlacement: function(error, element) {
error.addClass("help-block");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label"));
} else {
error.insertAfter(element);
}
},
highlight: function(element, errorClass, validClass) {
$(element).parents(".fieldWrapper").addClass("has-error").removeClass("has-success");
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents(".fieldWrapper").addClass("has-success").removeClass("has-error");
}
});