如何在 mvc 中使用 foreach 循環驗證多個文本框？

Question

 <div class="container" id="editdirector">             
            <table id="tblEdit1" class="table table-hover table-bordered" style="margin-top: 20px;">
                <thead style="text-align: center;">
                    <tr>                        
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Email</th>                        
                    </tr>
                </thead>

                <tbody style="text-align: center; text-transform:uppercase"> 
                    @int count; 
                    @foreach (var item in Model.Directors)
{
                        
        <tr class="item1">
            <td hidden>
                <input type="hidden" class="id1" name="" id="ID" value="@item.ID" />
            </td>
            <td>
                
                    
                <input type="text" class="name1" id="txtName" value="@item.Dir_Name" onchange="DirectorValidation();" style=" text-transform uppercase">
                
            </td>
            <td>
                

                <input type="text" class="mobile1" id="txtMobile" value="@item.Dir_Mobile" onchange="DirectorValidation();">
                
            </td>
            <td>
                

                <input type="text" class="email1" id="txtEmail" value="@item.Dir_Email" onchange="DirectorValidation();" style="text-transform: uppercase">
                
            </td>
                
        </tr>         
                    }                
                </tbody>
             
            </table>
                <button type="button" id="AddGrid" class="btn btn-default" style="border-radius: 20px; background: #59980c; color: #ffffff; margin-bottom: 20px;">
                    Update Director
                </button>
        </div>

我想對 foreach 循環生成的所有行進行 JavaScript 驗證，但它只會驗證第一行而不是第二行或第三行，這是該代碼

function DirectorValidation() {

  if ($('#txtMobile').val() == "") {
    alert('Enter Mobile No.');
    $('#txtMobile').focus();
    return false;
  }

  if ($('#txtMobile').val() != "") {
    var mobilePattern = /^([6-9]\d{9})$/;
    if (!$('#txtMobile').val().match(mobilePattern)) {
      alert('Invalid Mobile No.');
      $('#txtMobile').focus();
      return false;
    }
  }


  if ($('#txtEmail').val().trim() == "") {
    alert('Please Enter Email.');
    $('#txtEmail').focus();
    return false;
  }

  if ($('#txtEmail').val() != "") {
    var emailPattern = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!$('#txtEmail').val().match(emailPattern)) {
      alert('Invalid Email Id.');
      $('#txtEmail').focus();
      return false;
    }
  }

}

這只驗證第一行而不是第二行。 我如何驗證？

Answer 1

第一步：生成表中每個控件的動態ID

第二步：設置onblur或者離開javascript事件

第 3 步：創建 function 用於移動模式和 Email 模式檢查

第 4 步：檢查這些 Pattern 中的值是否為空 function

第五步：在onblur事件或leave事件中調用function

請檢查下面的代碼我希望它是工作

<div class="container" id="editdirector">             
    <table id="tblEdit1" class="table table-hover table-bordered" style="margin-top: 20px;">
        <thead style="text-align: center;">
            <tr>                        
                            <th>Name</th>
                            <th>Mobile</th>
                            <th>Email</th>                        
            </tr>
                </thead>

                <tbody style="text-align: center; text-transform:uppercase"> 
            @int count; 
            @foreach (var item in Model.Directors)
            {
                <tr class="item1">
                    <td hidden>
                        <input type="hidden" class="id1" name="" id="ID" value="@item.ID" />
                    </td>
                    <td>
                        <input type="text" class="name1" id="txtName_@count" value="@item.Dir_Name" style=" text-transform uppercase">
                    </td>
                    <td>
                        <input type="text" class="mobile1" id="txtMobile_@count" value="@item.Dir_Mobile" onblur="CheckMobileNo(this.id);">
                    </td>
                    <td>
                        <input type="text" class="email1" id="txtEmail_@count" value="@item.Dir_Email" onchange="CheckEmail(this.id);" style="text-transform: uppercase">
                    </td>
                </tr>         
            }                
                </tbody>
    </table>
        <button type="button" id="AddGrid" class="btn btn-default" style="border-radius: 20px; background: #59980c; color: #ffffff; margin-bottom: 20px;">Update Director</button>
</div>

function CheckMobileNo(id)
{
    if ($('#' + id).val() == "") 
    {
            alert('Enter Mobile No.');
            $('#' + id).focus();
            return false;
    }
    else if ($('#' + id).val() != "") 
    {
        var mobilePattern = /^([6-9]\d{9})$/;

        if (!$('#' + id).val().match(mobilePattern)) 
        {
        alert('Invalid Mobile No.');
        $('#' + id).focus();
        return false;
        }
    }
}

function CheckEmail(id)
{
    if ($('#' + id).val().trim() == "") 
    {
        alert('Please Enter Email.');
        $('#' + id).focus();
        return false;
    }

    if ($('#' + id).val() != "") 
    {
        var emailPattern = /^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        if (!$('#' + id).val().match(emailPattern)) 
        {
            alert('Invalid Email Id.');
            $('#' + id).focus();
            return false;
        }
    }
}