Validation, Seite anhalten, User kann korrigieren

MarkusBEO · 14. Dezember 2021

Guten Abend

Was muss ich beim folgenden Code ergänzen, damit nicht nur die Fehlermeldung erscheint, sondern das Script angehalten wird, damit der User seine Eingaben korrigieren kann?

Code

if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = true;
$mse = 'Bitte korrekte Emailadresse eingeben';
}

Sempervivum · 15. Dezember 2021

Hallo MarkusBEO

die Frage kann man nicht beantworten, ohne das Umfeld zu kennen: Wie wird das Formular abgeschickt? Ist es ein sogenanntes Affenformular, d. h. die Seite ruft sich selber auf? Oder wird beim Abschicken eine andere Seite aufgerufen? Oder wird das Formular mit Ajax abgeschickt?

Auf jeden Fall kann man sagen, dass unter dem Gesichtspunkt der Benutzerfreundlichkeit eine clientseitige Validierung, zusätzlich zur serverseitigen, zu empfehlen ist. Dann bekommt der Benutzer seine Rückmeldungen schon vor dem Abschicken. Mit der HTML5-Formularvalidierung ist das ja heute ein Kinderspiel:

https://developer.mozilla.org/…_form_validation_examples

MarkusBEO · 15. Dezember 2021

Als Anfänger und weil ich Ihre Fragen nicht sicher beantworten kann, erlaube ich mir, den Code der Seite einzustellen - dann zusätzlich den Code (funktion), welche inkludiert wird.

PHP

<?php
include 'functions.php';
$pdo = pdo_connect_mysql();
// Check if POST data is not empty
if (!empty($_POST)) {
// Post data not empty insert a new record
// Set-up the variables that are going to be inserted, we must check if the POST variables exist if not we can default them to blank
$id = isset($_POST['id']) && !empty($_POST['id']) && $_POST['id'] != 'auto' ? $_POST['id'] : NULL;
// Check if POST variable "name" exists, if not default the value to blank, basically the same for all variables
$name = isset($_POST['name' ]) ? $_POST['name'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
$phone = isset($_POST['phone']) ? $_POST['phone'] : '';
$title = isset($_POST['title']) ? $_POST['title'] : '';
$created = isset($_POST['created']) ? $_POST['created'] : date('Y-m-d H:i:s');
//$errors = [];
if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = true;
$mse = 'Bitte korrekte Emailadresse eingeben';
}
if (empty ($errors)) {
// Insert new record into the contacts table
$stmt = $pdo->prepare('INSERT INTO contacts VALUES (?, ?, ?, ?, ?, ?)');
$stmt->execute([$id, $name, $email, $phone, $title, $created]);
// Output message
$msg = 'Eintrag ist erfolgt'; //Created Successfully
}
}
?>
<?=template_header('Create')?>
<div class="content update">
<h2>Neuer Kontakt erfassen</h2>
<form action="create.php" method="post">
<label for="id">ID</label>
<label for="name">Name</label>
<input type="text" name="id" placeholder="26" value="automatisch" id="id">
<input type="text" name="name" placeholder="" id="name">
<label for="email">Email</label>
<label for="phone">Telefon</label>
<input type="text" name="email" placeholder="" id="email">
<input type="text" name="phone" placeholder="" id="phone">
<label for="title">Title</label>
<label for="created">Erfassen</label>
<input type="text" name="title" placeholder="" id="title">
<input type="datetime-local" name="created" value="<?=date('Y-m-d\TH:i')?>" id="created">
<input type="submit" value="Erfassen">
</form>
<?php if ($msg): ?>
<p><?=$msg?></p>
<?php endif; ?>
<?php if ($mse): ?>
<p><?=$mse?></p>
<?php endif; ?>
</div>
<?=template_footer()?>
Code für die Funktion:

Alles anzeigen

PHP

<?php
function pdo_connect_mysql() {
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'phpcrud2-bn';
$DATABASE_PASS = 'npZ2i60?';
$DATABASE_NAME = 'phpcrud2';
try {
return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// Falls Verbindungsproblem
exit('Datenbank nicht erreichbar');
}
}

Alles anzeigen

Sempervivum · 15. Dezember 2021

Danke, das ist schon mal sehr aufschlussreich. Scheint das besagte Affenformular zu sein, nur dann verstehe ich deine ursprüngliche Frage nicht: Wenn der Benutzer die Fehlermeldung sieht, müsste er darüber auch wieder das Formular sehen und in der Lage sein, seine Eingabe(n) dort zu korrigieren? Oder verstehe ich den Code falsch?

MarkusBEO · 15. Dezember 2021

Sempervivum schrieb:

Danke, das ist schon mal sehr aufschlussreich. Scheint das besagte Affenformular zu sein, nur dann verstehe ich deine ursprüngliche Frage nicht: Wenn der Benutzer die Fehlermeldung sieht, müsste er darüber auch wieder das Formular sehen und in der Lage sein, seine Eingabe(n) dort zu korrigieren? Oder verstehe ich den Code falsch?

Wenn der Benutzer die Fehlermeldung wegen falscher Emailangabe sieht, dann sind alle seine Angaben weg und wurden (richtigerweise) auch nicht gespeichert.

Das einzige Problem ist also scheinbar, wenn die Emailangabe falsch ist und der Benutzer unten links auf den Button "Erfassen" klickt, kommt zwar die Fehlermeldung (=richtig), aber alle Daten sind weg (=falsch).

Wenn alle Daten stimmen, wird der Eintrag gespeichert (=richtig).

m.scatello · 15. Dezember 2021

Beispiel am Eingabefeld name:

PHP

<?php
include 'functions.php';
$pdo = pdo_connect_mysql();
$name = "";
if (!empty($_POST)) {
:
:
:
?>
:
:
:
:
<input type="text" name="name" value = "<?php echo $name; ?>" placeholder="" id="name">
:
:
:

Alles anzeigen

Und woher willst du das wissen:

Code

$msg = 'Eintrag ist erfolgt';

Du fragst keinerlei Fehler ab, das solltest du aber machen, denn nur diese Ausgabe sagt nichts darüber aus.

Und das ist in mehrere Hinsicht grausam:

PHP

<?php if ($msg): ?>
<p><?=$msg?></p>
<?php endif; ?>
<?php if ($mse): ?>
<p><?=$mse?></p>
<?php endif; ?>

Warum nicht so:

PHP

<?php
if (isset($msg))
echo "<p>$msg</p>";
if (isset($mse))
echo "<p>$mse</p>";
?>

Zumal dir

PHP

<?php if ($msg): ?>

bei hochgedrehtem Error-Reporting ein Warning um die Ohren haut.

Apropo Error-Reporting:

Solange du an einem Script entwickelst, solltest diese beiden Zeilen immer am Anfang haben:

Code

error_reporting(E_ALL);
ini_set('display_errors', true);

MarkusBEO · 15. Dezember 2021

Vielen Dank für die Tipps, ich habe das soweit mal angepasst,
ausser #6, erster Eintrag wegen Eingabefeld Name, weil mir nicht klar ist, was der Eintrag auf Zeile 7 genau bedeutet.

Die Fehlerabfrage muss ich noch lernen (ob gespeichert wurde oder nicht). Das Errorreporting habe in in der functions.php eingefügt.
Ich bin Anfänger und habe den Code aus dem Internet und will ihn für meine Bedürfnisse abändern.

Mein Hauptproblem: Habe schon stundenlang geübt mit diesem und anderen Affenformularen und habe bisher nie erreicht dass
bei einer Fehleingabe des Users das Formular stehen bleibt, bis alles i.O. ist. - Hier stehe ich total auf dem Schlauch, was ich da ergänzen/anpassen müsste.

Sempervivum · 15. Dezember 2021

Zitat

dass bei einer Fehleingabe des Users das Formular stehen bleibt

Versuche es mit der Formularvalidierung durch HTML5, wie in meinem Beitrag #2 empfohlen.

Ändere z. B. das Eingabefeld für die Email indem Du den Typ auf "email" änderst und das Attribut "required" hinzu fügst:

<input type="email" name="email" placeholder="" id="email" required>

MarkusBEO · 15. Dezember 2021

Vielen Dank!!! Es funktioniert!!!

m.scatello · 15. Dezember 2021

Simples Beispiel eines Affenformulars, bei dem die eingegebenen Werte im Formular stehen bleiben:

PHP

<?php
$name = "";
if (isset($_POST['name']))
$name = $_POST['name'];
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Affenformular</title>
</head>
<body>
<form action="" method="post">
<input name="name" value="<?php echo $name; ?>">
<input type="submit" value="Senden">
</form>
</body>
</html>

Alles anzeigen

Sempervivum · 16. Dezember 2021

Freut mich, dass es funktioniert. Mit ein wenig CSS kann man dem Benutzer auch gleich bei der Eingabe signalisieren, dass der Wert noch nicht stimmt:

Code

<style>
/* Die Pseudoklasse :invalid gibt an,
dass die Eingabe fehlerhaft ist. */
input:invalid,
input:invalid:focus {
outline: none;
border: 2px solid red;
}
</style>

Tags