Ajouter dynamiquement javascript pour la validation des numéros de téléphone

Question

Je travaille sur un projet qui est déjà opérationnel et qui nécessite quelques corrections. Apparemment, je dois ajouter un code javascript/jquery conditionnel pour valider le champ du numéro de téléphone. Mais mon problème est que les développeurs ont utilisé CommModeID/CommValues paire pour le téléphone/email et même pour le téléphone/email de la personne de contact aussi. J'ai besoin d'appliquer une classe dynamiquement aux champs lorsque le CommModeID = 1. Quelqu'un peut-il m'aider à réaliser ceci dans ce code suivant. En ce moment je ne suis pas capable de comprendre comment je devrais le faire parce que le projet est vaste et je suis nouveau dans ce projet.

Modèle:

public class ShipperEmail 
{ 
     [Key] 
     public int CommShipperID { get; set; } 
     public int ShipperContactID { get; set; } 
     public string Person { get; set; } 
     public string CommName { get; set; } 
     [Required(ErrorMessage = "Must be Select")] 
     public int CommModeID { get; set; } 
     public string CommMode { get; set; } 
     [Required(ErrorMessage = "Must be entered")] 
     public string CommValues { get; set; } 
     public bool isPrimary { get; set; } 
     public string flag { get; set; } 
     public int? RelationID { get; set; } 
     public int? TimeZoneId { get; set; } 
     public string PreferredTimeFrom { get; set; } 
     public string PreferredTimeTo { get; set; } 
} 

Vue:

@model IList<Writer.Repository.Models.ShipperEmail> 

<div class="row"> 
    <div class="col-sm-12"><button type="button" id="btnclose" class="close-link close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div> 
</div>   

@{ int i = 0; } 
@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmEditShippercontacts" })) 
{ 
    @Html.AntiForgeryToken() 
    <div class="row mar-none" id="pnl-emailaddresscomps"> 
     <input type="hidden" name="ShipperID" value="@ViewData["ShipperID"]" /> 
     <input type="hidden" name="ShipperContactID" value="@ViewData["ShipperContactID"]" /> 
     <input type="hidden" name="Self" value="@ViewData["Self"]" /> 
     <input type="hidden" name="CommTypeID" value="@ViewData["CommTypeID"]" /> 
     @if (Model != null) 
     { 
      for (i = 0; i < Model.Count(); i++) 
      { 
       <div class="datarw"> 
        @Html.HiddenFor(m => m[i].ShipperContactID) 
        @Html.HiddenFor(m => m[i].CommShipperID) 
        @Html.HiddenFor(m => m[i].flag, new { @id = "flag" }) 
        <div class="row"> 
         <div class="col-sm-4"> 
          @Html.DropDownListFor(m => m[i].CommModeID, new SelectList((System.Collections.IEnumerable)ViewData["SysCommMode"], "Value", "Text", Model[i].CommModeID), new { @class = "form-control input-md" }) 
         </div> 
         <div class="col-sm-8"> 
          <div class="input-group"> 
           @Html.EditorFor(m => m[i].CommValues, new { htmlAttributes = new Dictionary<string, object> { { "class", "form-control input-md" } } }) 
           @Html.ValidationMessageFor(m => m[i].CommValues, "", new Dictionary<string, object> { { "class", "text-danger" } }) 
           <div class="input-group-btn no-pad"> 
            <div id="Addemailpluse"> 
             <button href="#" class="btn btn-default btn-sm add-btn @(i == 0 ? "btnAddEmail" : "Emailremove-btn") " type="button"><i class="fa @(i == 0 ? "fa-plus" : "fa-minus") "></i></button> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="row"> 
         <div class="col-sm-3 col-sm-offset-4"> 
          <div class="input-sm pad-none"> 
           <div class="checkbox mar-none"> 
            <label> 
             @Html.CheckBoxFor(m => Model[i].isPrimary, new Dictionary<string, object> { { "class", "isPrimaryEmail" } }) Primary 
            </label> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      } 
     } 

    </div> 
    <div class="row"> 
     <div class="col-sm-2 col-sm-offset-10"> 
      <button type="submit" class="btn btn-primary btn-sm pull-right m-t-sm">@I18N("Save")</button> 
     </div> 
    </div> 
} 

<script> 
    $(document).ready(function() { 
     function fnBindEvsAC() { 

      $('.datarw input[type="checkbox"]').on('change', function (e) { 
       e.preventDefault(); 
       if ($(this).is(':checked')) { 
        $('input[type=checkbox]').each(function() { 
         if (this.checked) { 
          $(this).prop('checked', false); 
          $(this).parent('.icheckbox_square-orange').removeClass('checked'); 
         } 
        }); 
        $(this).prop('checked', true); 
        $(this).parent('.icheckbox_square-orange').addClass('checked'); 
       } else { 
        if ($('#pnl-emailaddresscomps .isPrimaryEmail:checked').length == 0) { 

         $(this).prop('checked', true); 
         alert("@I18N("Atleast one record should be set as Primary.")"); 
        } 
        else { 
         $(this).parent('.icheckbox_square-orange').removeClass('checked'); 
        } 
       } 
      });    

      if ($('#pnl-emailaddresscomps .isPrimaryEmail:checked').length == 0) { 
       $('#pnl-emailaddresscomps .isPrimaryEmail:first').prop('checked', true); 
      } 

      var form = $("#mdlAddEdit form"); 
      form.removeData('validator'); 
      form.removeData('unobtrusiveValidation'); 
      $.validator.unobtrusive.parse(form); 
     } 
     fnBindEvsAC(); 
     var idxdatarw = "@i"; 
     $('.btnAddEmail').on('click', function (e) { 
      e.preventDefault(); 
      e.stopImmediatePropagation(); 
      var $dr = $('#pnl-emailaddresscomps .datarw').eq(0).clone().find("#hidenemail,#EmailAddress").val("").end(); 
      $dr.find('input,select').each(function() { 
       this.name = this.name.replace('[0]', '[' + idxdatarw + ']'); 
       this.id = this.id.replace('_0_', '_' + idxdatarw + '_'); 

       var $valmsg = $(this).siblings('.field-validation-valid'); 
       if ($($valmsg).length > 0) { 
        var stvalmsg = $($valmsg).attr('data-valmsg-for'); 
        $($valmsg).attr('data-valmsg-for', stvalmsg.replace('[0]', '[' + idxdatarw + ']')); 
       } 
      }); 
      $($dr).find('input[type="text"],textarea').val(""); 
      $($dr).find('input[type="checkbox"]').prop('checked', false); 
      $($dr).find('input[id^="flag"]').val('I'); 
      $($dr).find('.btnAddEmail').addClass('Emailremove-btn'); 
      $($dr).find('.btnAddEmail').find("i").removeClass("fa fa-plus").addClass("fa fa-minus"); 
      $('#pnl-emailaddresscomps').append($dr); 
      fnBindEvsAC(); 
     }); 

     $(document).on("click", ".Emailremove-btn", function() { 
      if ($(this).closest(".datarw").find('input[type="checkbox"]:checked').length == 1) { 
       alert('Remove primary then try again..!') 
      } else { 
       $(this).closest(".datarw").find('input[id^="flag"]').val('D'); 
       $(this).closest(".datarw").hide(); 
      } 
     }); 

     $('form#frmEditShippercontacts').on('submit', function (e) { 
      e.preventDefault(); 
      if (!$(this).valid()) { return; } 
      $(this).ajaxSubmit({ 
       success: function (data) { 
        if (data.Success) { 
         toastr.success("@I18N("Contact detail saved successfully.")"); 
         $('.webui-popover.ShipperContact.in').hide(); 
         if (data.Result.Data) { 
          var commVal = data.Result.Data.value; 
          var commtype = data.Result.Data.CommType; 
          var Self = data.Result.Data.Self; 
          if (commtype == "@((int)UtilityEnums.SysCommType.Email)") { 
           if (Self) { $('#selfEmailID').html(commVal); } else { $('#PEmail').html(commVal); } 
          } 
          else if (commtype == "@((int)UtilityEnums.SysCommType.Mobile)") { 
           if (Self) { $('#selfMobile').html(commVal); } else { $('#PMobileupd').html(commVal); } 
          } 
          fnReloadMoveSummary(); 
         } 
        } 
        else { 
         $('.webui-popover.ShipperContact.in .webui-popover-content').html(data.Result); 
        } 
        btnClosePopups(); 
       }, 
       error: function (e) { 
        $('.webui-popover.ShipperContact.in').hide(); 
        toastr.error("@I18N("Contact details not saved.")"); 
       } 
      }); 
     }); 
    }); 
</script> 

Controller:

Answer 1

pourrait vous pas mettre un motif sur l'entrée? le filtrer avant de le soumettre?

-à-dire

\+\d{11} 

répondrait à 614.123.123 etc alternativement, sans le code international

(\+\d{11})|(\d{10}) 

répondrait à 0412312312

Answer 2

Essayez cette méthode

function checkPhone(phone) { 
     return /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(phone); 
    }