Question

我有一个包含AddRow按钮的动态数据表。单击AddRow会创建一个新行。在创建新行之前，我想检查字段是否为空以及字段是否为空我想把重点放在空场上。

一切正常，但问题是重点不起作用..

＆＃13;

//Initializing datatable relation
var InitRelationTable = function() {

  var rowCount = $('#tblStudentRelation >tbody >tr').length;

  //For firsttime addition of datatable        
  if (rowCount == 0) {
    var $tbody = $("#tblStudentRelation tbody");
    $($tbody).html('');

    //Adds 5 rows to the datatable
    for (var i = 0; i < 1; i++) {

      var slno = parseInt(i + 1);

      var $row = $('<tr/>');
      $row.append(' <td class="slno">' + slno + '</td>');
      $row.append(' <td><input name="StudentRelation[' + i + '].Name" type="text" class="form-control capitalise refName"  placeholder="Name" /></td>');

      $row.append(' <td><input name="StudentRelation[' + i + '].Relation" type="text" class="form-control capitalise refRelation"  placeholder="Relation" /></td>');

      $row.append(' <td><input name="StudentRelation[' + i + '].EmailId" type="text" class="form-control capitalise refEmailId" data-val="true"  data-val-email="Invalid EmailId"  placeholder="EmailId" />' +
        '<span class="field-validation-valid" data-valmsg-for="StudentRelation[' + i + '].EmailId" data-valmsg-replace="true"></span></td>');

      $row.append(' <td><input name="StudentRelation[' + i + '].MobileNo" type="text" class="form-control numberOnly mobileValidate refMobile" data-val="true" placeholder="Contact No" /></td>');
      $tbody.append($row);
    }
  } else {
    var slno = parseInt(rowCount + 1);
    var i = parseInt(rowCount);

    var $row = $('<tr/>');
    $row.append(' <td class="slno">' + slno + '</td>');
    $row.append(' <td><input name="StudentRelation[' + i + '].Name" type="text" class="form-control capitalise refName"  placeholder="Name" /></td>');

    $row.append(' <td><input name="StudentRelation[' + i + '].Relation" type="text" class="form-control capitalise refRelation"  placeholder="Relation" /></td>');

    $row.append(' <td><input name="StudentRelation[' + i + '].EmailId" type="text" class="form-control capitalise refEmailId" data-val="true"  data-val-email="Invalid EmailId"  placeholder="EmailId" />' +
      '<span class="field-validation-valid" data-valmsg-for="StudentRelation[' + i + '].EmailId" data-valmsg-replace="true"></span></td>');

    $row.append(' <td><input name="StudentRelation[' + i + '].MobileNo" type="text" class="form-control numberOnly mobileValidate refMobile" data-val="true"  placeholder="Contact No" /></td>');

    $row.append('<td><div class="tools"><a class="btn rowDelete"><i class="fa  fa-trash-o " style="color:red"></i></a></div></td>');

    $("#tblStudentRelation tbody tr:last").after($row);

  }

}

 InitRelationTable()

$(document).on("click", "#btnAddRow", function(e) {

  if (ValidateReference()) {
    InitRelationTable();
  }

  return false;

});

var ValidateReference = function() {
  var validate = true;
  $("#tblStudentRelation tbody tr").each(function(i, el) {
    //Gets the reference name of each row
    var $tdRefName = $(this).find('.refName');
    ///Gets the reference relation of each row
    var $tdRefRelation = $(this).find('.refRelation');
    //Gets the reference mobile of each row
    var $tdRefMobile = $(this).find('.refMobile');

    if ($tdRefName.val() == "") {
     
      $tdRefName.focus();
      validate = false;
      return false;
    } else if ($tdRefRelation.val() == "") {
    
      $tdRefRelation.focus();
      validate = false;
      return false;
    } else if ($tdRefMobile.val() == "") {
     
      $tdRefMobile.focus();
      validate = false;
      return false;
    }
  });
  return validate;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblStudentRelation" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Relation</th>
      <th>EmailId</th>
      <th>ContactNo</th>


    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Relation</th>
      <th>EmailId</th>
      <th>ContactNo
        <button type="button" id="btnAddRow" class="btn btn-sm btn-info pull-right ">
          <i class="fa  fa-plus"></i>
          Add Row
        </button>
      </th>


    </tr>
  </tfoot>
</table>

＆＃13;

Answer 1

您似乎没有处理电子邮件的案例。当我添加该代码时，这很好。

//Gets the reference name of each row
var $tdRefName = $(this).find('.refName');
///Gets the reference relation of each row
var $tdRefRelation = $(this).find('.refRelation');
//Gets the reference mobile of each row
var $tdRefMobile = $(this).find('.refMobile');

var $tdRefEmailId = $(this).find('.refEmailId')

if ($tdRefName.val() == "") {

  $tdRefName.focus();
  validate = false;
  return false;

} else if ($tdRefEmailId.val() == "") {

  $tdRefEmailId.focus();
  validate = false;
  return false;

} else if ($tdRefRelation.val() == "") {

  $tdRefRelation.focus();
  validate = false;
  return false;
} else if ($tdRefMobile.val() == "") {

  $tdRefMobile.focus();
  validate = false;
  return false;
}

但如果你想稍微清理一下，你可以用以下方法替换这个功能：

var ValidateReference = function() {
  var validate = true;

  $("#tblStudentRelation tbody tr:last-child input").each(function(i, el) {

    if($(el).val() == "")
    {
      $(el).focus();
      validate = false;
      return false;
    }

  });
  return validate;
}

如果您希望它验证每一个输入，请删除：last-child选择器。

Jquery-Dynamic专注于空表行

1 个答案: