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