javascript - 尽管我删除了 Firefox 仍然保留带有红色边框的输入字段

Question

我正在做一个元素，要求我让用户在模态视图中插入一些数据，然后保存它。

整个过程必须经过验证过程，如果它发现任何类型的错误，它将使用以下 CSS 片段突出显示该框。

.erroreEvidenziato {
    border: 1px solid red;
}

模态视图的 HTML 代码如下所示

<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>

这就是模态的样子

saveAssociazione() 方法将负责保存新记录，如下所示

    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;
        [...]
   }

如果某些字段未填写，这就是模式的外观。

现在，如果我退出模式，所有 erroreEvidenziato 类都会被删除

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();
}

这是我的问题。在 Firefox 上(我目前使用的是 69 版)，如果我保存一些字段未填写的记录，然后退出模式并再次重新打开它，这就是我得到的结果。

这几乎就像 erroreEvidenziato 类没有被删除，但如果我在元素上使用 Firefox 检查器，我看不到任何可以远程提醒红色边框的东西。

这发生在两个 jQuery 的日期选择器上，它们是这样初始化的。

                $("#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'});

有什么问题吗？

Answer 1

required 属性可以使浏览器验证字段并将自己的 css 放在上面。如果您正在使用自定义验证，那么您可能需要删除此属性以阻止浏览器也对其进行验证

More information about html5 form validation

或者，您可以使用如下方式覆盖样式:

input:invalid {
   border ... 
}