删除属性以使用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

您有一些选择器，分别是class和id。您只需要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>