Site one page, bootstrap 4 et validation PHP

Marsh Posté le 27-11-2019 à 12:32:20

Bonjour,

je suis entrain de bosser sur un site one page contenant 3 formulaires et utilisant avec Boostrap 4.

J'ai suivi les recommandations Boostrap 4 concernant la validation des données, à savoir utiliser la validation HTML 5, qui fonctionne plutot pas mal.
https://getbootstrap.com/docs/4.4/c [...] validation

=> si les données sont valides, la page scroll jusqu'au formulaire suivant (c'est du javascript et le scroll fonctionne avec des ancres)

Mais je me demandais comment gérer la validation côté serveur sachant que les données seront introduites en db tout en interférant pas avec le front ?
Dois-je utiliser de l'ajax d'office ?

un de mes formulaires:

Code :

"<form class="need-validation" role="form" id="register-form" method="post" action="forms_treat/form2.php" novalidate>
<div class="alert alert-danger alert-dismissible fade show form-alert d-none" role="alert">
<strong><?= $translations['FORM_ERROR'] ?></strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group input-group-lg custom-control custom-checkbox">
<input name="more18" class="custom-control-input is-required" id="form__input--more18" type="checkbox" required>
<label for="form__input--more18" class="custom-control-label">
<span><?= $translations['CONFIRM_AGE'] ?></span>
</label>
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group">
<label for="country">Country</label>
<select required class="form-control" name="country" id="country">
<option value="Belgium">Belgium</option>
</select>
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputGender">Gender</label>
<select required name="gender" class="form-control form__select--gender" id="inputGender">
<option class="form__option--sex-item" value="">
</option>
<option class="form__option--sex-item" value="M">
<?php echo $translations['MALE'] ?>
</option>
<option class="form__option--sex-item" value="F">
<?php echo $translations['FEMALE'] ?>
</option>
</select>
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group col-md-4">
<label for="inputFirstname">Firstname</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Alphabetic and hyphen only"></span>
<input required type="text" name="first_name" value="Thomas" class="form-control" minlength="2" maxlength="32" pattern="^[A-Za-z -']+$" id="inputFirstname" placeholder="Firstname">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group col-md-4">
<label for="inputLastname">Lastname</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Alphabetic and hyphen only"></span>
<input required type="text" name="last_name" value="Brenard" class="form-control" minlength="2" maxlength="32" pattern="^[A-Za-z -']+$" id="inputLastname" placeholder="Lastname">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputAddress">Address</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: Alphabetic, dot, and hyphen"></span>
<input required type="text" name="address" class="form-control" minlength="3" pattern="^[A-Za-z0-9 -'.]+$" id="inputAddress" placeholder="1234 Main St">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group col-md-4">
<label for="inputHouseNumber">House number</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: Alphabetic, digits"></span>
<input required type="text" name="address_no" class="form-control" minlength="1" maxlength="4" pattern="[0-9A-Za-z]" id="inputHouseNumber" placeholder="Apartment, studio, or floor">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputCity">City</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="The last tip!"></span>
<input required type="text" name="city" minlength="2" pattern="^[A-Za-z -{0,}'.]+$" class="form-control" id="inputCity" placeholder="City">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group col-md-4">
<label for="inputZip">Zip</label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="The last tip!"></span>
<input required type="text" name="zip" class="form-control" minlength="3" pattern="^[A-Za-z0-9]+$" id="inputZip" placeholder="Zip">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
</div>
<div class="form-group">
<label for="form__input--phone"><?= $translations['PHONE'] ?></label>
<span class="fa fa-question-circle ml-2" data-toggle="tooltip" title="Allowed: digits only"></span>
<input required type="number" name="phone" class="form-control" id="form__input--phone">
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<div class="form-group">
<label for="form__input--birthday">
<?= $translations['DOB'] ?>
</label>
<input type="date" class="form-control" id="form__input--birthday" value="" min="" max="" />
<div class="invalid-feedback">
<?php echo $translations['FIELD_ERROR'] ?>
</div>
</div>
<button type="submit" class="btn btn-square btn-lg btn-md btn-space" id="form1__btn-submit">Send
</button>
</form>"

Le Javascript:

Code :

$('#register-form').on('submit', function (event) {
event.preventDefault();
event.stopPropagation();
if ($('#register-form').isValid() === false) {
$('.form-alert').removeClass('d-none');
} else {
userInfos.firstname = $('#inputFirstname').val();
$section = $('#section-questions');
goToNextSection($section);
}
$('#register-form').addClass('was-validated');
return false;
});

pour l'instant voici ce que j'ai dans mon fichier php

Code :

if (isset($_POST)) {
$data = [];
$errors = false;
$user_data = [];
$quizzName = $_SESSION['quizz_path'];
$user_data['lang'] = $_SESSION['lang'];
$user_data['first_name'] = filter_input(INPUT_POST, 'first_name', FILTER_SANITIZE_STRING);
$user_data['last_name'] = trim(filter_input(INPUT_POST, 'last_name', FILTER_SANITIZE_STRING));
$user_data['gender'] = trim(filter_input(INPUT_POST, 'gender', FILTER_SANITIZE_STRING));
$user_data['address'] = trim(filter_input(INPUT_POST, 'address', FILTER_SANITIZE_STRING));
$user_data['address_no'] = trim(filter_input(INPUT_POST, 'address_no', FILTER_SANITIZE_STRING));
$user_data['city'] = trim(filter_input(INPUT_POST, 'city', FILTER_SANITIZE_STRING));
$user_data['zip'] = trim(filter_input(INPUT_POST, 'zip', FILTER_SANITIZE_STRING));
$user_data['phone'] = trim(filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_STRING));
$_SESSION['user_firstname'] = $user_data['first_name'];
//get birtdhay (cant sanatize)
$birthday = $_POST["birthday"];
foreach ($user_data as $key => $value) {
if (empty($user_data[$key])) {
$errors = true;
break;
}
}
$quizzName = $_SESSION['quizz_path'];
//formatting birthday date
$format = 'Y-m-d';
$user_data['birthday'] = DateTime::createFromFormat($format, $birthday);
$previousURL = $_SERVER['HTTP_REFERER'];
if ($errors) //if errors have been detected in the form do nothing
{
} else { //else, go to next form
}

Merci pour votre aide

Tom

Message édité par tompouss le 27-11-2019 à 12:33:57

---------------
collectionneur de pâtes thermiques

Marsh Posté le 27-11-2019 à 12:32:20

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *