Rataiczak24 Rataiczak24 - 2 months ago 6
PHP Question

Validating Cells Within a Table While Editing

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


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>


jQuery imports:

<head>
<title>Stage Rebate Master HTML Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="html_master.css">
<script type="text/javascript" src="html_master.js"></script>
</head>

Answer

I wrote you a little somthing to get you started, you'll need to add more switch case conditions (I handled buyer_id only) and add the dialog box (I used #myDialogBox) but I think you'll be okay :)

$(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 {
        var isValid = true;
        var errors = '';
        $('#myDialogBox').empty();
        tds.each(function(){
             var type = $(this).attr('class');
             var value = $(this).text();
             switch(type){
                 case "buyer_id":
                     if(!$.isNumeric(value)){
                          isValid = false;
                         errors += "numbers only in buyer id\n";
                      }
                     break;
             }
        })
        if(isValid){
            $this.html('Edit');
            tds.prop('contenteditable', false);
        }else{
            alert(errors);
        }
    }
});
});
Comments