Firefox still keeps an input field with a red border though I removed it

Question

I'm working on a project that requires me to have the user insert some data on a modal view and then save it.

The whole process has to go through a validation process, for which if it finds any kind of errors it will highlight with the following CSS snippet the box.

.erroreEvidenziato {
    border: 1px solid red;
}

The HTML code for the modal view looks like this

<div id=nuovaAssociazione class="modal">
  <div class="modal-content small smallModalAgency">
    <div class="title">
      <span class="info">
          <em>* </em> {{#i18n}}mandatoryField{{/i18n}}
      </span>
      <h3 id="titoloModale"></h3>
      <input type="hidden" id="idAgency" value="">
    </div>
    <div id="message" class="erroreModaleDiv" style="display:none;">
      <span class="error">{{#i18n}}overlappingDates{{/i18n}}</span>
    </div>
    <table class="modify">
      <tr>
        <td class="label">{{#i18n}}agencyName{{/i18n}}
          <span class="error-drop errorModaleAgency" id="selezioneAgency" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>
        </td>
        <td><input name="agency" style="width:330px;height:25px;" maxlength="35" id="agency">
          <div id="test"></div>
        </td>
        <td><input type="hidden" id="supplier_id" name="supplier_id" {{#supplier_id}}value="{{supplier_id}}" {{/supplier_id}}/></td>
      </tr>
      <tr>
        <td class="label">{{#i18n}}agencyPort{{/i18n}}
          <span class="error-drop errorModaleAgency" id="selezionePorto" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>
        </td>
        <td>
          <select name="porto" class="select2" maxlength="35" id="porto">
            <option value="">...</option>
            {{#porti}}
            <option value="{{portcode}}">{{portname}}</option>
            {{/porti}}
          </select>
        </td>
      </tr>
      <tr>
        <td class="label">{{#i18n}}agencyDivision{{/i18n}}
          <span class="error-drop errorModaleAgency" id="selezioneBuyergroup" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>
        </td>
        <td>
          <select name="buyergroup" class="select2" style="width: 182px; !important;" maxlength="35" id="buyergroup">
            <option value="">...</option>
            {{#buyergroups}}
            <option value="{{value}}">{{label}}</option>
            {{/buyergroups}}
          </select>
        </td>
      </tr>
      <tr>
        <td class="label">{{#i18n}}periodoValiditaDa{{/i18n}}
          <span class="error-drop errorModaleAgency" id="selezioneValidityDa" style="display:none;">{{#i18n}}mandatoryField{{/i18n}}</span>
        </td>
        <td><input name="releaseDate" id="validity_da" type="text" size="10" value="" required="" class="" style="width:195px;height:25px;"></td>
      </tr>
      <tr>
        <td class="label">{{#i18n}}periodoValiditaA{{/i18n}}
          <span class="error-drop errorModaleAgency" style="display:none;" id="selezioneValidityA">{{#i18n}}mandatoryField{{/i18n}}</span>
        </td>
        <td><input name="releaseDate" id="validity_a" type="text" size="10" value="" required="" style="width:195px;height:25px;"></td>
      </tr>
      <tr>
        <td colspan=3>
          <input class="btn" type="button" value="{{#i18n}}save{{/i18n}}" onclick="saveAssociazione();" />
          <input class="btn" id="annullaModifica" type="button" value="{{#i18n}}annulla{{/i18n}}" onclick="closeModal('nuovaAssociazione');" />
        </td>
      </tr>
    </table>
  </div>
</div>

And this is how the modal looks like

The saveAssociazione() method, which will take care of saving the new record, looks like this

    function saveAssociazione() {
        $(".erroreModaleDiv").hide();
        $("#agency").removeClass("erroreEvidenziato");
        $("#porto").removeClass("erroreEvidenziato");
        $(".SumoSelect").removeClass("erroreEvidenziato");
        $("#buyergroup").removeClass("erroreEvidenziato");
        $("#validity_da").removeClass("erroreEvidenziato");
        $("#validity_a").removeClass("erroreEvidenziato");
        $("#selezioneAgency").hide();
        $("#selezionePorto").hide();
        $("#selezioneValidityDa").hide();
        $("#selezioneValidityA").hide();
        $("#selezioneBuyergroup").hide();
        var gotError = false;
        var agency = $("#agency").val();
        debugger;
        if (agency == null || agency == undefined || agency == "") {
            $("#agency").addClass("erroreEvidenziato");
            $("#selezioneAgency").show();
            gotError = true;
        }
        var porto = $("#porto").val();
        if (porto == null || porto == undefined || porto == "") {
            $("#selezionePorto").show();
            $(".SumoSelect").addClass("erroreEvidenziato");
            gotError = true;
        }
        var buyergroup = $("#buyergroup").val();
        if (buyergroup == null || buyergroup  == undefined || buyergroup == "") {
            $("#selezioneBuyergroup").show();
            $("#buyergroup").addClass("erroreEvidenziato");
            gotError = true;
        }
        var validityDa = $("#validity_da").val();
        if (validityDa == null || validityDa == undefined || validityDa == "") {
            $("#selezioneValidityDa").show();
            $("#validity_da").addClass("erroreEvidenziato");
            gotError = true;
        }
        var validityA = $("#validity_a").val();
        selezioneValidityA
        if (validityA == null || validityA == undefined || validityA == "") {
            $("#selezioneValidityA").show();
            $("#validity_a").addClass("erroreEvidenziato");
            gotError = true;
        }
        if (gotError) {
            return;
        }
        debugger;
        [...]
   }

And this is how the modal looks if some fields haven't been filled.

Now, if I quit the modal, all the erroreEvidenziato classes gets removed

function closeModal(modal) {
    $(".erroreModaleDiv").hide();
    if (modal === 'nuovaAssociazione') {
        $("#selezioneAgency").hide();
        $("#agency").removeClass("backGrInput");
        $("#buyergroup").removeClass("backGrInput");
        $("#port").removeClass("backGrInput");
        $("#agency").removeClass("erroreEvidenziato");
        $("#porto").removeClass("erroreEvidenziato");
        $(".SumoSelect").removeClass("erroreEvidenziato");
        $("#buyergroup").removeClass("erroreEvidenziato");
        $("#validity_da").removeClass("erroreEvidenziato");
        $("#validity_a").removeClass("erroreEvidenziato");
        $("#selezionePorto").hide();
        $("#selezioneValidityDa").hide();
        $("#selezioneValidityA").hide();
        $("#selezioneBuyergroup").hide();
        $("#porto")[0].sumo.unSelectAll();
        $("#porto")[0].sumo.enable();
        $("#agency").val("");
        $("#supplier_id").val("");
        $("#buyergroup").val("");
        $("#validity_da").val("");
        $("#validity_a").val("");

        $("#agency").attr("disabled", false);

        $("#buyergroup").attr("disabled", false);
    }
    $('#'+modal).hide();
}

Here's my problem. On Firefox (I currently have version 69), if I save the record with some fields not filled and, then, quit the modal and reopen it again, this is what I get.

It's almost like the erroreEvidenziato class hasn't been removed, though if I go with Firefox inspector on the element, I don't see anything that can even remotely remind of a red border.

This happens on the two jQuery's datepickers, that are initialized like this.

                $("#validity_a").datepicker({
                    showWeek: true,
                    firstDay: 1,
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'dd/mm/yy'});

                $("#validity_da").datepicker({
                    showWeek: true,
                    firstDay: 1,
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'dd/mm/yy'});

What could be wrong?

Answer 1

The required attribute can cause browsers to validate the fields and put their own css on them. If you are using custom validation, then you may need to remove this attribute in order to stop the browser from also validating it

More information about html5 form validation

Alternately, you may be able to override the style using something like this:

input:invalid {
   border ... 
}