In: Computer Science
In php:
After completed, the website should hide all messages before the user click submit button OR show either the error message or success message if the user click submit button.
//code
<?php
if(isset($_GET['submit'])){
//sanitize the input
/* Check the error from the input:
if input from user is empty
-> get an error string variable
if input is not empty
-> use preg_match() to match the pattern
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
-> if it's a matched, get a success string variable
*/
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
</head>
<body>
<form action="" class="main-form
needs-validation">
<div class="form-group">
<label for="numbers">Phone Number</label>
<input type="text" id="numbers" class="form-control"
value=<?php //use PHP to print out the value the use typed in if
any ?>>
<small class="form-text text-muted">xxx.xxx.xxx or
xxx-xxx-xxxx</small>
<!-- Set a condition
if there is an error string variable, print out the string in
PHP
if there is a success string variable, print out the string in
PHP
-->
<div class="alert
alert-danger">
Must enter a valid
phone number! <!-- should be from an error string variable
-->
</div>
<div class="alert
alert-success">
Phone number is valid!
<!-- should be from an error string variable -->
</div>
</div>
<button type="submit" class="btn btn-primary"
>Submit</button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
Here is the updated code and made some modification and formatted validations for phone.
<?php
if(isset($_POST['submit'])){
$ok = true;
$phoneerror = $_POST["phoneno"];
if (empty($phoneerror)) {
$ok = false;
$phoneerrors = "<div class='alert alert-danger'>Phone number cannot be empty!</div>";
}
if ($phoneerror) {
if(preg_match("/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/", $phoneerror)) {
$ok = false;
$phoneerrors = "<div class='alert alert-success'>Phone number is valid!</div>";
}else{
$ok = false;
$phoneerrors = "<div class='alert alert-danger'>Must enter a valid phone number!</div>";
}
}
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
</head>
<body>
<form method="post" action="" class="main-form needs-validation">
<div class="form-group">
<label for="numbers">Phone Number</label>
<input type="text" id="phone" class="form-control" name="phoneno">
</div>
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
<!-- Error Messages echo-->
<?php echo $phoneerrors; ?>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Phone validation limit and format xxx-xxx-xxxx start -->
<script>
function mob_formatting(ele,restore) {
var numcheck,
selection_start = ele.selectionStart,
selection_end = ele.selectionEnd,
number = ele.value.replace(/\D/g,'');
// automatically add dashes
if (number.length > 2) {
// matches: 123 || 123-4 || 123-45
numcheck = number.substring(0,3) + '-';
if (number.length === 4 || number.length === 5) {
// matches: 123-4 || 123-45
numcheck += number.substr(3);
}
else if (number.length > 5) {
// matches: 123-456 || 123-456-7 || 123-456-789
numcheck += number.substring(3,6) + '-';
}
if (number.length > 6) {
// matches: 123-456-7 || 123-456-789 || 123-456-7890
numcheck += number.substring(6);
}
}
else {
numcheck = number;
}
ele.value = (numcheck.length > 12) ? numcheck.substring(12,0) : numcheck;
if (numcheck.slice(-1) === '-' && restore === false
&& (numcheck.length === 8 && selection_end === 7)
|| (numcheck.length === 4 && selection_end === 3)) {
selection_start = numcheck.length;
selection_end = numcheck.length;
}
else if (restore === 'revert') {
selection_start--;
selection_end--;
}
ele.setSelectionRange(selection_start, selection_end);
}
function phone_number_check(field,e) {
var key_code = e.keyCode,
key_string = String.fromCharCode(key_code),
press_delete = false,
dash_key = 189,
delete_key = [8,46],
direction_key = [33,34,35,36,37,38,39,40],
selection_end = field.selectionEnd;
// delete key was pressed
if (delete_key.indexOf(key_code) > -1) {
press_delete = true;
}
// only force formatting is a number or delete key was pressed
if (key_string.match(/^\d+$/) || press_delete) {
mob_formatting(field,press_delete);
}
// do nothing for direction keys, keep their default actions
else if(direction_key.indexOf(key_code) > -1) {
// do nothing
}
else if(dash_key === key_code) {
if (selection_end === field.value.length) {
field.value = field.value.slice(0,-1)
}
else {
field.value = field.value.substring(0,(selection_end - 1)) + field.value.substr(selection_end)
field.selectionEnd = selection_end - 1;
}
}
// all other non numerical key presses, remove their value
else {
e.preventDefault();
// field.value = field.value.replace(/[^0-9\-]/g,'')
mob_formatting(field,'revert');
}
}
document.getElementById('phone').onkeyup = function(e) {
phone_number_check(this,e);
}
</script>
<!-- Phone validation limit and format xxx-xxx-xxxx end -->
<style>
body{
padding:20px;
}
form.main-form.needs-validation {
padding-bottom: 20px;
}
</style>
</body>
</html>
Output: