Добавление проверки при редактировании строк в таблице

Question

В настоящее время у меня есть таблица, где я могу редактировать строку и сохранять ее после завершения редактирования. Я хочу, чтобы иметь возможность добавить проверку, например, если ячейка электронной почты не включает в себя электронную почту, то она не будет сохранена. Я хочу отобразить диалоговое окно, отображающее эту ошибку, если вы нажмете «Сохранить», и поле не было проверено. Как я могу это сделать?

Вот что мне нужно:

Buyer ID - numbers only 
POC Name - text only 
POC Email - email only 
POC Phone - phone number only 

Относительный HTML/PHP:

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><button class="edit" name="edit">Edit</button> 
     <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
    </tr> 

Относительный Javascript:

$(document).ready(function() { 
    $('.edit').click(function() { 
     var $this = $(this); 
     var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() { 
      return $(this).find('.edit').length === 0; 
     }); 
     if ($this.html() === 'Edit') { 
      $this.html('Save'); 
      tds.prop('contenteditable', true); 
     } else { 
      $this.html('Edit'); 
      tds.prop('contenteditable', false); 
     } 
    }); 
    }); 

Answer 1

Вам нужно будет добавить регулярные выражения в свой код, вы также можете воспользоваться атрибутами HTML <input>, такими как:

`<input type=email>` 
`<input type=tel>` 

Вы можете узнать больше о том, что HERE

Другой вариант/дополнительные проверки могут быть выполнены путем включения RegEx проверки на ваших входных элементов. Это GREAT WEBSITE для выяснения ваших проверок RegEx.

Типичные Javascript RegEx Проверил:

function telephoneCheck(str) { 
    var isPhone = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str); 
    alert(isPhone); 
} 
telephoneCheck("1 555 555 5555");