CodeIgniter 4 Formuliervalidatie en formulierverzending met voorbeeld

Vorm in CodeOntsteker 4

Formulieren bieden gebruikers een manier om met de applicatie te communiceren en gegevens te verzenden. Een formulier kan bijvoorbeeld gebruikt worden voor een contactformulier dat een websitebezoeker kan invullen en naar ons kan versturen. De ontvangen informatie wordt doorgaans opgeslagen in de database of per e-mail verzonden.

HTML-formulierstructuur

De volgende code toont de structuur van een typisch HTML-formulier.

<form id="frmUsers" name="frmUsers" method="POST" action="create_user.php">
<input type="text" id="user_id" name="user_id">
<input type="password" id="password" name="password">

<input type="submit" value="Submit">
</form>

Hier:

• … De <form>- en <form>-tags zijn de openings- en sluitingslabels van het formulier. De attributen id en name specificeren de naam en id van het formulier. Het attribuut method specificeert het te gebruiken HTTP-werkwoord, meestal POST.
• Specificeert de formulierelementen. Het attribuut 'name' is de variabelenaam die naar de backendserver wordt verzonden voor verwerking.

CodeIgniter Form Helper

HTML is gemakkelijk te begrijpen en te schrijven, maar Codeontsteker Maakt de zaken nog eenvoudiger. CodeIgniter heeft ingebouwde functies voor het maken van HTML-formulieren. Laten we het volgende eens bekijken. CodeIgniter-formuliercode die de formulierhelper gebruikt om een ​​formulier te maken:

<?php
echo form_open('create_user.php', ['id' => 'frmUsers']);

echo form_label('User Id', 'user_id');
echo form_input(['name' => 'user_id']);

echo form_label('Password', 'password');
echo form_input(['type' => 'password', 'name' => 'password']);

echo form_submit('btnSubmit', 'Create User');

echo form_close();
?>

Hier:

• echo form_open('create_user.php', ['id' => 'frmUsers']); maakt de openingstag van het formulier aan, stelt de methode in op POST en stelt de actie in. URL naar create_user.php.
• echo form_label('Gebruikers-ID', 'user_id'); maakt een label aan met de tekst 'Gebruikers-ID' voor het invoerveld met de naam user_id.
• echo form_input(['name' => 'user_id']); maakt een tekstinvoerveld aan met de naam user_id.
• echo form_submit('btnSubmit', 'Gebruiker aanmaken'); maakt een verzendknop aan met het label 'Gebruiker aanmaken'.
• echo form_close(); sluit het formulier.

Zoals je ziet, maken form helpers het eenvoudig om formulieren te maken met pure PHP. Door attributen door te geven aan de form helper-methoden, kunnen we de gegenereerde HTML voor het formulier aanpassen. De bovenstaande code genereert de volgende HTML-formuliercode:

<form action="http://localhost:3000/index.php/create_user.php" id="frmUsers" method="post" accept-charset="utf-8">
<label for="user_id">User Id</label>
<input type="text" name="user_id" value=""/>

<label for="password">Password</label>
<input type="password" name="password" value=""/>

<input type="submit" name="btnSubmit" value="Create User"/>
</form>

Het grootste voordeel van het gebruik van de formulierhelper is dat deze semantisch correcte code genereert die voldoet aan de HTML-standaarden. U kunt de officiële documentatie raadplegen. CodeVoor meer informatie kunt u de Igniter-documentatie raadplegen: https://codeigniter.com/user_guide/helpers/form_helper.html.

CodeVoorbeeld van een ontstekingsvorm

Na de basisprincipes te hebben behandeld CodeIgniter, laten we teruggaan naar ons tutorialproject, waar we de afgelopen tijd aan hebben gewerkt. CodeIgniter-zelfstudieserieSamenvattend bouwt dit tutorialproject een app voor contactbeheer die de gegevens in een database opslaat.

Contact maken

In de vorige tutorial hebben we routes voor onze applicatie en eenvoudige weergaven aangemaakt. Open application/views/contacts/create.php en pas de code voor create.php als volgt aan:

<div class="column">
<h2 class="title">Create Contact</h2>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email" name="email" class="input" type="email" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>

Let op: De bovenstaande code gebruikt pure HTML om het formulier te maken. Laten we nu eens kijken hoe ons formulier er in de webbrowser uitziet. Laad het volgende. URL in uw webbrowser: http://localhost:3000/contacts/createAls je het tutorialproject hebt gebouwd, zou je het volgende moeten zien:

Formuliervalidatie in Codeontsteker

Validatie speelt een cruciale rol bij het verwerken van gegevens uit formulieren. Stel dat een gebruiker zich aanmeldt op een website; we willen er zeker van zijn dat hij of zij de vereiste gegevens en een geldig e-mailadres invult. Als we met datumwaarden werken, willen we ervoor zorgen dat de datumbereiken geldig zijn, dus we accepteren geen datum met 32 ​​dagen in een maand.

Validatie lost deze problemen op. CodeBij het werken met webapplicaties vindt Igniter-validatie op twee fronten plaats.

Client-side validatie vindt plaats in de webbrowser, meestal met HTML. JavaScript. Het verbetert de prestaties omdat alles aan de clientzijde gebeurt, waardoor het niet nodig is om gegevens naar de server te verzenden. Het nadeel is dat de gebruiker er controle over heeft; als je afhankelijk bent van... JavaScript om te valideren en de gebruiker schakelt uit JavaScript, je validatie zal mislukken.

Server-side validatie vindt plaats op de server. Het nadeel is dat de gebruiker de gegevens naar de server moet sturen en op het antwoord moet wachten, wat netwerkbronnen verbruikt en de prestaties kan beïnvloeden. Het grootste voordeel is meer controle en de zekerheid dat uw validatieregels werken, zelfs als de gebruiker ze uitschakelt. JavaScript.

Een betere strategie is om client-side validatie als primaire methode te gebruiken en server-side validatie als reservemechanisme.

Formuliervalidatieregels toevoegen

CodeIgniter heeft een ingebouwde validatiebibliotheek. Deze bibliotheek wordt geladen met de volgende regel:

$this->load->library('form_validation');

De CodeDe Igniter-formuliervalidatiebibliotheek kan onder andere de volgende acties uitvoeren:

• Controleert verplichte velden. De functie onderzoekt de ingevoerde waarden en geeft een foutmelding als een veld dat als verplicht is gemarkeerd, geen waarde heeft.
• Validatie van gegevenstypen – sommige velden vereisen alleen numerieke waarden. Als een niet-numerieke waarde wordt gedetecteerd, geeft de bibliotheek een foutmelding en wordt het verzenden van het formulier afgebroken.
• Lengtevalidatie – sommige velden vereisen een bepaald minimum of maximum aantal tekens. De validatiebibliotheek behandelt dergelijke gevallen.
• Gegevenssanering – de bibliotheek kan schadelijke code uit de ingediende gegevens verwijderen voor de veiligheid. Als de ingediende waarden actieve JavaBij script- of SQL-injectiecode verwijdert de bibliotheek de schadelijke code en maakt deze onbruikbaar.
• Valideer unieke databasevelden – stel dat u een aanmeldingsformulier hebt dat een e-mailadres gebruikt, en u wilt ervoor zorgen dat het adres uniek is. De bibliotheek maakt het eenvoudig om de ingediende gegevens te controleren aan de hand van een databasetabel en -veld.

Validatieregels worden ingesteld volgens het volgende formaat:

$this->form_validation->set_rules('field','human readable field','rule',['custom message']);

Hier:

• 'field' specificeert de naam van het formulierveld dat door de bibliotheek moet worden gevalideerd.
• 'Menselijk leesbaar veld' specificeert de door mensen leesbare opmaak van het veld, die aan de gebruiker wordt getoond wanneer er een fout optreedt.
• 'rule' specificeert de toe te passen validatieregel, zoals verplicht, numeriek of een minimale lengte.
• ['aangepast bericht'] is optioneel en kan een aangepast validatiebericht instellen dat wordt weergegeven wanneer de regel niet wordt voldaan.

Het volgende is een CodeIgniter-voorbeeld voor het valideren van het contactnummer:

$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');

Hier:

• De bovenstaande code controleert of het veld contact_number is ingevuld. Zo niet, dan geeft de code een foutmelding dat het veld Contact Number verplicht is.

Om de validatie uit te voeren aan de hand van de ingestelde regels, gebruiken we de volgende functie uit de validatiebibliotheek:

$this->form_validation->run()

Als de bovenstaande code 'false' retourneert, zijn een of meer validatieregels niet voldaan. Als de code 'true' retourneert, zijn alle validatieregels geslaagd en kunt u verdergaan.

Laten we eens kijken naar meer voorbeelden van validatieregels. Stel dat u meerdere velden wilt valideren, zoals de contactnaam, het telefoonnummer en het e-mailadres. U kunt de volgende code gebruiken:

$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);

$this->form_validation->set_rules($rules);

Hier:

• In het bovenstaande voorbeeld geven we een array van velden met regels op voor de `set_rules`-functie van de bibliotheek. Dit maakt het gemakkelijker wanneer je meerdere velden moet valideren.

Unieke validatie

Als we het contactnummer willen controleren om te voorkomen dat we hetzelfde nummer twee keer opslaan, kunnen we de volgende regel gebruiken:

$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');

Hier:

• | wordt gebruikt om meerdere regels aan elkaar te koppelen.
• is_unique[contacts.contact_number] controleert of de waarde voor contact_number uniek is ten opzichte van de contact_number veldwaarden in de databasetabelcontacten.

Formuliervalidatiefoutmeldingen weergeven

Als er een fout optreedt tijdens de verwerking van het formulier, kunt u de volgende code gebruiken om de validatiefouten weer te geven:

<?php echo validation_errors(); ?>

Hier:

• De bovenstaande functie retourneert alle opgetreden fouten.

Ingediende formuliergegevens invullen: Sticky Forms

Sommige formulieren bevatten veel velden, en als er een fout optreedt, wilt u er zeker van zijn dat de correct ingevoerde gegevens behouden blijven. De validatiebibliotheek biedt mechanismen om dit te bereiken, met behulp van de volgende code:

<?php echo set_value('field_name'); ?>

Hier:

• De bovenstaande code geeft de invoer weer die de gebruiker heeft ingevoerd.

Voor een complete handleiding over de beschikbare methoden in de validatiebibliotheek kunt u de API-documentatie op de officiële website raadplegen. CodeGebruikershandleiding Igniter: https://codeigniter.com/userguide3/libraries/form_validation.html.

CodeVoorbeeld van formuliervalidatie met Igniter

In deze reeks tutorials hebben we code toegevoegd aan ons tutorialproject, een applicatie voor contactbeheer. In dit gedeelte laden we de validatiebibliotheek en bekijken we hoe we deze in de praktijk kunnen gebruiken aan de hand van een voorbeeld uit de praktijk. Pas de routecode als volgt aan om de `store`-methode toe te voegen:

$route['default_controller'] = 'welcome';
$route['contacts'] = 'contacts';
$route['create'] = 'contacts/create';
$route['store'] = 'contacts/store';
$route['edit/:id'] = 'contacts/edit';
$route['update/:id'] = 'contacts/update';
$route['delete/:id'] = 'contacts/delete';
$route['users'] = 'welcome/users';

Laten we nu de formuliervalidatiebibliotheek in de Contacts-controller laden en enkele validatieregels instellen. Pas de code aan zoals hieronder weergegeven:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Contacts extends CI_Controller {

public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
$this->load->library('form_validation');
}

public function index() {
$this->load->view('header');
$this->load->view('contacts/index');
$this->load->view('footer');
}

public function create() {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
}

public function store() {
$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);

$this->form_validation->set_rules($rules);

if ($this->form_validation->run() == FALSE) {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
} else {
redirect(base_url('contacts'));
}
}

public function edit($id) {
$this->load->view('header');
$this->load->view('contacts/edit');
$this->load->view('footer');
}

public function update($id) {
$this->load->view('header');
$this->load->view('contacts/update');
$this->load->view('footer');
}

public function delete($id) {
$this->load->view('header');
$this->load->view('contacts/delete');
$this->load->view('footer');
}
}

Hier:

• $rules = array(…) definieert de validatieregels.
• $this->form_validation->set_rules($rules); stelt de validatieregels in.
• Als ($this->form_validation->run() == FALSE) {…} worden de validatieregels uitgevoerd. Als deze niet werken, wordt het formulier opnieuw weergegeven met validatiefouten. Als de validatie slaagt, worden we doorgestuurd naar de pagina met de contactlijst. Onder normale omstandigheden zouden we de gegevens naar de database schrijven, wat we in de volgende tutorial doen. databanken.

Wijzig de aanmaakpagina in application/views/contacts/create.php zoals hieronder weergegeven:

<div class="column">
<h2 class="title">Create Contact</h2>
<div class="notification is-danger">
<?php echo validation_errors(); ?>
</div>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="contact_name" name="contact_name" class="input" type="text" value="<?php echo set_value('contact_name'); ?>" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="contact_number" name="contact_number" class="input" type="text" value="<?php echo set_value('contact_number'); ?>" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email_address" name="email_address" class="input" type="email" value="<?php echo set_value('email_address'); ?>" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>

Hier:

• Geeft de eventuele fouten weer die tijdens het validatieproces optreden.
• Hiermee wordt de eerder ingevoerde waarde, indien aanwezig, ingesteld.

Laad het volgende URL Open de volgende link in uw webbrowser en klik vervolgens op 'Contactpersoon aanmaken' zonder waarden in te voeren:

Veelgestelde vragen