JQuery Ajax Done with required textarea

Question

everyone. I have a (set of) form(s) with a textarea inside. This textarea has property required. It works as expected. If the user tries to submit the form without filling the textarea, the browser hightlights it and notify the user.

My problem is that I intercepted form submitting with JQuery AJAX, so I can notify the user without reloading the page. The code is the following:

$(function () {
$('form').each(function (id, el) {
    $(el).submit(function (event) {
        event.preventDefault();
        var _data = $(el).serialize();
        alert(_data);
        $.ajax({
                type: 'POST',
                url: $(el).attr('action'),
                data: _data
        })
        .done(function(response) {
            $("#notify-modal").find('.modal-body').removeClass('alert-danger');
            $("#notify-modal").find('.modal-body').addClass('alert-success');
            $("#notify-modal").find('.modal-body').text('Já recebemos sua história! Obrigado por compartilhá-la conosco!');
            $("#notify-modal").modal('show');
            $(el).find('textarea').val('');
        })
        .fail(function(data) {
            $("#notify-modal").find('.modal-body').removeClass('alert-success');
            $("#notify-modal").find('.modal-body').addClass('alert-danger');
            $("#notify-modal").find('.modal-body').text("Erro ao enviar história! Contate os administradores do site! " + data.responseText);
            $("#notify-modal").modal('show');
        });
    });
});

});

When the user submits a valid information, the AJAX function works as expected posting to my PHP script and displaying the modal that informs the user. But note that in .done() function there's a statement that clears the textarea after the data is submited ($(el).find('textarea').val('');). My issue is that when I clear the textarea it gets highlighted, even if the data was properly submitted, as if had been cleared before submiting. How can I prevent this behaviour?

When you say highlighted, do you mean it is focused? If so you can set the focus to whichever element you desire with jQuery's .focus() method. — Joe Lissner, Mar 29 '17 at 16:48
In Firefox it not only gets focused. It would be no problem to me. But the textarea also gets a red glow, denoting "something is wrong". You can see it here: http://imgur.com/gallery/nO4ed My notifying modal appeared, but also the textarea was highlighted. — Mateus Felipe, Mar 29 '17 at 16:49
Ahh, I see. That is because it is required, regardless of whether or not the user has submitted anything. Check out [this answer](http://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input) for how to proceed. Another option though would be to set the value of the text area to a space `' '` instead of nothing `''`. — Joe Lissner, Mar 29 '17 at 16:57
@JoeLissner Your `' '` solution seems to be a good one, although a little gambiarra (kludge). Anyway, about your statement, `it is required, regardless of whether or not the user has submitted anything`, note that the second form in the image is not glowing, as no data has been submitted. — Mateus Felipe, Mar 29 '17 at 17:04
Right, but the second form hasn't been interacted with either. It will flag as an error only if a value was there, and then removed. If a value was never there, then it would only flag if the user tried to submit the form through a form submit button or input where the default event was not prevented. — Joe Lissner, Mar 29 '17 at 17:06

score 1 · Accepted Answer · edited May 23 '17 at 11:46

That is because it is required, regardless of whether or not the user has submitted anything. Check out this answer for how to proceed. Another option though would be to set the value of the text area to a space ' ' instead of nothing ''.

Image of error provided by Mateus Felipe

The second form hasn't been interacted with, which is why it is not showing an error. It will flag as an error only if a value was there, and then removed. If a value was never there, then it would only flag if the user tried to submit the form through a form submit button or input where the default event was not prevented.

JQuery Ajax Done with required textarea

1 Answers1