在表中编辑行时添加验证

Question

Currently, I have a table where I can edit a row and save it after i am done editing. I want to be able to add validation so for example if the email cell doesn't include an email, then it will not save. I am wanting to display a dialog box displaying the error if you click save and a field hasn't been validated. How can I do this?

Here is what I need:

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

Relative 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>

Relative 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

You will need to add regular expressions to your code, you can also take advantage of HTML <input> attributes as well such as:

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

You can find more about that HERE

The other option/additional checks can be performed by including RegEx checks on your input items. This is a GREAT WEBSITE for figuring out your RegEx checks.

Typical Javascript RegEx Check:

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");