I have a contact form in a modal.
I submit the form using Ajax, and show a message depending on results, above the form.
The problem is, that when the results are returned from the Ajax, the browser(Firefox) marks all fields as errors. I want the browser not to that.
For ajax I'm using pure javascript:
function sendAjax(event) {
event.preventDefault();
var xhr, form;
form = event.target;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
setResponseMessage(form, JSON.parse(xhr.responseText).message);
resetForm(form);
......
// this function cleans the fields after submit.
function resetForm(form) {
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type !== 'submit' || form.elements[i].name === DOMStrings.csrf) {
form.elements[i].value = '';
}
}
}
}
===================
I don't use form.reset()
because I have a hidden field that I don't want to clean.
Also, the issue is not related with cleaning the fields, the issue is that after submitting, and corect Ajax transimission, Firefox automatically, make the form fields as invalid based on HTML attributes, add a red shadow.
I just want Firefox, to show the form as it is. There is no third-party or other code validation involved.