completed validation assignment
This commit is contained in:
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "violet/validation",
|
||||||
|
"type": "project",
|
||||||
|
"autoload": {
|
||||||
|
"psr-4": {
|
||||||
|
"Violet\\Validation\\": "src/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"require": {}
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* Positioning */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
/* Styling */
|
||||||
|
background-color: #bbedbe;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
/* Positioning */
|
||||||
|
width: 80%;
|
||||||
|
padding: 2vw;
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
font-size: 8vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h3,
|
||||||
|
p,
|
||||||
|
input {
|
||||||
|
color: #0e3610;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 60%;
|
||||||
|
padding: 2.5vw 5vw 2.5vw 5vw;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
/* Input Shape */
|
||||||
|
width: 50%;
|
||||||
|
padding: 1vw;
|
||||||
|
margin: 1vw;
|
||||||
|
border: none;
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
/* Styling */
|
||||||
|
background-color: #f1fbf2;
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
font-size: 1vw;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
/* Button Shape */
|
||||||
|
width: 40%;
|
||||||
|
padding: 1vw;
|
||||||
|
margin: 1vw;
|
||||||
|
border: none;
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
color: white;
|
||||||
|
font-size: 1vw;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
/* Transition for hover */
|
||||||
|
transition-duration: 500ms;
|
||||||
|
|
||||||
|
background-color: #1c6b20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2vw;
|
||||||
|
background-color: gray;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: white;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: white;
|
||||||
|
background-color: #0e3610;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,40 @@
|
|||||||
|
<?php
|
||||||
|
$error = '';
|
||||||
|
if (isset($_GET['error']))
|
||||||
|
$error = $_GET['error'];
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Validation</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Validation Assignment</h1>
|
||||||
|
|
||||||
|
<form action="process.php" method="post">
|
||||||
|
<input name="phone_number" type="text" placeholder="(xxx)xxx-xxxx" <?php $error ? 'value="' . $error . '"' : '' ?>>
|
||||||
|
<div class="row">
|
||||||
|
<button>Submit</button>
|
||||||
|
<button type="reset" class="reset">Reset</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if ($error) {
|
||||||
|
echo '
|
||||||
|
<div class="card error">
|
||||||
|
<h3 class="error">Invalid Format</h3>
|
||||||
|
<p class="error">You entered: ' . $error . '</p>
|
||||||
|
<p class="error">Phone number must be formatted as (xxx)xxx-xxxx.</p>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Dummy Title</title>
|
||||||
|
<link href="css/styles.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Validation Assignment</h1>
|
||||||
|
<?php
|
||||||
|
validate($_POST['phone_number']);
|
||||||
|
?>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
function validate($number)
|
||||||
|
{
|
||||||
|
// Valid format: (999)999-9999
|
||||||
|
$valid_format_regex = '/[(]\d{3}[)]\d{3}-\d{4}/';
|
||||||
|
if (preg_match($valid_format_regex, $number)) {
|
||||||
|
echo '
|
||||||
|
<div class="card success">
|
||||||
|
<h3 class="success">Thank You!</h3>
|
||||||
|
<p class="success">You entered: ' . $number . ', a valid phone number.</p>
|
||||||
|
<img src="img/success.jpg" />
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
} else {
|
||||||
|
header('Location: .?error=' . $number);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
Reference in New Issue
Block a user