Firefox alerts me for "required" field after JS clears it

Question

I have done an ajax POST using jQuery and I want that, after a successful submit, the form inputs are cleared. The problem is that Firefox (24.0) alerts me about required field after JS clear them.

This is the jsFiddle example and this is the code. Try to write something in the input and submit the form.

HTML:

<form id="form" action="" method="post" accept-charset="utf-8">
    <input id="text" type="text" name="text" required />
    <button type="submit" name="submit">Submit</button>
</form>

JS:

jQuery(document).ready(function() {
    "use strict";

    $("#form").on("submit", function (e) {
        e.preventDefault();
        $("#text").val("");
    });
});

UPDATE: When the page is loaded the first time, Firefox marks the input as missing only if you give it some input, delete it and the input losts focus. It seems that Firefox doesn't take into account that the form was submitted and it falls into this case.

Answer 1

Here's your crack

[required] {
box-shadow: none;

}

you will get the alert box but not the red border.

Here's a fiddle

fiddle

Although it might work when you have proper action link .. In my firefox the red border does not come but some time behaves wierd