Удалить атрибуты для проверки с помощью javaScript

Question

Я создаю функцию для добавления regex во входной почтовый индекс.Регулярное выражение Я добавляю его только для некоторых наций, например для Франции.

Функция, которую я сделал, я вызываю обратно, когда выбираю нацию с помощью выбора, и это работает, когда я добавляю атрибуты к входным данным.вместо этого он не работает, если позже я захочу изменить страну, выбрав страну, для которой я не должен проверять почтовый индекс.

Браузер продолжает выполнять проверку, возвращая мне ошибкупроверка 'Le Champ Doit Contenir 5 chiffres.'

Как я могу изменить JavaScript, чтобы аннулировать добавленные атрибуты?

Спасибо

function CodePostalRegEx(input, action) {
  if (action == "add") {
    $(input).attr('data-val', 'true'); // turn on validation
    $(input).attr('data-val-regex', 'Le champ doit contenir 5 chiffres'); // message to show when validation fails
    $(input).attr('data-val-regex-pattern', "^(([0-8][0-9])|(9[0-5]))[0-9]{3}$"); //regex
  } else {
    $(input).attr('data-val', 'false');
    $(input).removeAttr('data-val-regex'); // message to show when validation fails
    $(input).removeAttr('data-val-regex-pattern'); //regex
    $(input).removeData('unobtrusiveValidation');
    $(input).removeData('validator');
  }
  $("#MonProfilForm").each(function() {
    $.data($(this)[0], 'validator', false);
  });
  $.validator.unobtrusive.parse("#MonProfilForm");
}



 $(".Identite #PaysNaissance").change(function () {

    if ($(".Identite #PaysNaissance").val().toLowerCase() != "france") {

        CodePostalRegEx(".Identite #CodePostalNaissance", "remove");

        $(".Identite #CodePostalNaissance").unmask("data-mask");

        if ($(".Identite #CommuneNaissance").hasClass('ui-autocomplete-input'))
        {
            $(".Identite #CommuneNaissance").autocomplete("destroy");
            $(".Identite #CommuneNaissance").removeData('autocomplete');
        }
       

        if ($(".Identite #CodePostalNaissance").hasClass('ui-autocomplete-input')) {
            $(".Identite #CodePostalNaissance").autocomplete("destroy");
            $(".Identite #CodePostalNaissance").removeData('autocomplete');
        }

     

        
    }
    else {
       
        $(".Identite #CodePostalNaissance").mask("00000");
        CodePostalRegEx(".Identite #CodePostalNaissance", "add");
        setupAC()
        

    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Moi" class="" id="MonProfilForm" method="post" role="form" novalidate="novalidate">
  <div class="form-group label-floating has-success-website">
    <label class="control-label" for="ClientModel_EtatCivil_PaysNaissance">Pays de naissance</label>
    <select class="form-control valid" for="pp8" id="PaysNaissance" name="ClientModel.EtatCivil.PaysNaissance" aria-invalid="false">
      <option value=""></option>
      <option value="EX-REP YOUGOSLAVE DE MACEDOINE">EX-REP YOUGOSLAVE DE MACEDOINE</option>
      <option selected="selected" value="FIDJI">FIDJI</option>
      <option value="FINLANDE">FINLANDE</option>
      <option value="FRANCE">FRANCE</option>
      <option value="GABON">GABON</option>
      <option value="GAMBIE">GAMBIE</option>
      <option value="GEORGIE">GEORGIE</option>
      <option value="GEORGIE DU SUD ET LES ILES SANDWICH DU SUD">GEORGIE DU SUD ET LES ILES SANDWICH DU SUD</option>
      <option value="GHANA">GHANA</option>
    </select>
    <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.PaysNaissance" data-valmsg-replace="true" id="pp8"></span>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-5">
      <div class="form-group label-floating has-success-website">
        <label class="control-label" for="ClientModel_EtatCivil_CodePostalNaissance">Code postal de naissance</label>
        <input class="form-control ui-autocomplete-input valid" for="pp6" id="CodePostalNaissance" name="ClientModel.EtatCivil.CodePostalNaissance" type="text" value="3440" autocomplete="off" aria-invalid="false">
        <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CodePostalNaissance" data-valmsg-replace="true" id="pp6"></span>
      </div>
    </div>
    <div class="col-xs-12 col-md-7">
      <div class="form-group label-floating is-empty">
        <label class="control-label" for="ClientModel_EtatCivil_CommuneNaissance">Commune de naissance</label>
        <input class="form-control" id="CommuneNaissance2" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" style="display: inline-block;">
        <input class="form-control ui-autocomplete-input" id="CommuneNaissance" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" autocomplete="off" style="display: none;">
        <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CommuneNaissance" data-valmsg-replace="true" id="pp7"></span>
      </div>
    </div>
  </div>
  <div class="content-container-detail-footer text-center content-container-detail-footer-fixed-bottom col-lg-12">
    <button class="flat-butt flat-primary-butt flat-butt-responsive" type="submit" name="action:Save">
								<span class="">Enregistrer</span>
							</button>
    <button class="flat-butt flat-primary-send flat-butt-responsive" type="submit" name="action:AskSend">
								<span class="visible-xs-inline">Envoyer</span>
								<span class="hidden-xs">Envoyer à mon notaire</span>
							</button>
  </div>
</form>

Answer 1

У вас есть несколько селекторов с классом, затем id.Вам нужен только идентификатор, так как он должен быть уникальным, и это самый быстрый селектор.Я также изменил, чтобы использовать кэш выбранного элемента, таким образом, делая код проще и не ударяя DOM с помощью селектора (не обходя), я избегаю ошибки из-за пустой отсутствующей функции, которую я добавил.setupAC Я также добавил эту строку: jqinput.data('valRegexPattern', reg); Обратите внимание на удаленную черту и случай верблюда в соответствии со стандартом.

Этот код кажется странным, вы имели в виду обрабатывать форму или входные данные в форме?В любом случае это кажется неправильным:

$("#MonProfilForm").each(function() {
    $.data($(this)[0], 'validator', false);
});

Итак, если вам нужен один или другой из них:

Форма:

$("#MonProfilForm").data('validator', false);

Входные данные

$("#MonProfilForm").find('input').each(function() {
    $.data($(this)[0], 'validator', false);
});

function CodePostalRegEx(jqinput, action) {
  var reg = "^(([0-8][0-9])|(9[0-5]))[0-9]{3}$";
  if (action == "add") {
    jqinput.attr('data-val', 'true'); // turn on validation
    jqinput.attr('data-val-regex', 'Le champ doit contenir 5 chiffres'); // message to show when validation fails
    jqinput.attr('data-val-regex-pattern', reg); //regex
    jqinput.data('valRegexPattern', reg);
  } else {
    jqinput.attr('data-val', 'false');
    jqinput.removeAttr('data-val-regex'); // message to show when validation fails
    jqinput.removeAttr('data-val-regex-pattern'); //regex
    jqinput.removeData('unobtrusiveValidation');
    jqinput.removeData('validator');
  }
  $("#MonProfilForm").each(function() {
    $.data($(this)[0], 'validator', false);
  });
  $.validator.unobtrusive.parse("#MonProfilForm");
}

function setupAC() {}

$("#PaysNaissance").change(function() {
  var cpn = $("#CodePostalNaissance");
  var cn = $("#CommuneNaissance");
  if ($(this).val().toLowerCase() != "france") {
    CodePostalRegEx(cpn, "remove");
    cpn.unmask("data-mask");
    if (cn.hasClass('ui-autocomplete-input')) {
      cn.autocomplete("destroy");
      cn.removeData('autocomplete');
    }
    if (cpn.hasClass('ui-autocomplete-input')) {
      cpn.autocomplete("destroy");
      cpn.removeData('autocomplete');
    }
  } else {
    cpn.mask("00000");
    CodePostalRegEx(cpn, "add");
    setupAC();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<form action="/Moi" class="" id="MonProfilForm" method="post" role="form" novalidate="novalidate">
  <div class="form-group label-floating has-success-website">
    <label class="control-label" for="ClientModel_EtatCivil_PaysNaissance">Pays de naissance</label>
    <select class="form-control valid" for="pp8" id="PaysNaissance" name="ClientModel.EtatCivil.PaysNaissance" aria-invalid="false">
      <option value=""></option>
      <option value="EX-REP YOUGOSLAVE DE MACEDOINE">EX-REP YOUGOSLAVE DE MACEDOINE</option>
      <option selected="selected" value="FIDJI">FIDJI</option>
      <option value="FINLANDE">FINLANDE</option>
      <option value="FRANCE">FRANCE</option>
      <option value="GABON">GABON</option>
      <option value="GAMBIE">GAMBIE</option>
      <option value="GEORGIE">GEORGIE</option>
      <option value="GEORGIE DU SUD ET LES ILES SANDWICH DU SUD">GEORGIE DU SUD ET LES ILES SANDWICH DU SUD</option>
      <option value="GHANA">GHANA</option>
    </select>
    <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.PaysNaissance" data-valmsg-replace="true" id="pp8"></span>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-5">
      <div class="form-group label-floating has-success-website">
        <label class="control-label" for="ClientModel_EtatCivil_CodePostalNaissance">Code postal de naissance</label>
        <input class="form-control ui-autocomplete-input valid" for="pp6" id="CodePostalNaissance" name="ClientModel.EtatCivil.CodePostalNaissance" type="text" value="3440" autocomplete="off" aria-invalid="false">
        <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CodePostalNaissance" data-valmsg-replace="true" id="pp6"></span>
      </div>
    </div>
    <div class="col-xs-12 col-md-7">
      <div class="form-group label-floating is-empty">
        <label class="control-label" for="ClientModel_EtatCivil_CommuneNaissance">Commune de naissance</label>
        <input class="form-control" id="CommuneNaissance2" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" style="display: inline-block;">
        <input class="form-control ui-autocomplete-input" id="CommuneNaissance" name="ClientModel.EtatCivil.CommuneNaissance" type="text" value="" autocomplete="off" style="display: none;">
        <span class="field-validation-valid text-danger help-block" data-valmsg-for="ClientModel.EtatCivil.CommuneNaissance" data-valmsg-replace="true" id="pp7"></span>
      </div>
    </div>
  </div>
  <div class="content-container-detail-footer text-center content-container-detail-footer-fixed-bottom col-lg-12">
    <button class="flat-butt flat-primary-butt flat-butt-responsive" type="submit" name="action:Save">
								<span class="">Enregistrer</span>
							</button>
    <button class="flat-butt flat-primary-send flat-butt-responsive" type="submit" name="action:AskSend">
								<span class="visible-xs-inline">Envoyer</span>
								<span class="hidden-xs">Envoyer à mon notaire</span>
							</button>
  </div>
</form>