I'm using ajax to make a server side form validation in laravel. All my validations are working fine except for one which i can figure out how to do it. Actually i have a field in my form for the ID number, which can take either 7 caracters for passport number, 9 caracters for ID card number or 20 caracters for temporary ID card number. How can i set a validation for size or lenght with 3 differents options?
function validation(e, f) {
var x = document.getElementsByClassName("alert-danger");
var y = "false";
var i;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "/membre/modalValidation",
method: "post",
data: (e == 1) ? new FormData(document.getElementById("modal-danger4")) :
new FormData(document.getElementById("modal-danger8")),
processData: false,
dataType: 'json',
async: false,
contentType: false,
beforeSend: function() {
$(document).find('.alert-danger').text('');
},
success: function(data) {
if (data.status == 0) {
$.each(data.error, function(prefix, val) {
$('.m' + f + ' .' + prefix + '_error').text(val[0]);
});
} else {
}
for (i = 0; i < 30; i++) {
if (x[i].innerHTML) {
y = "true";
}
}
}
});
return y;
}
public function modalValidation(Request $request)
{
$newDate = Carbon::now()->subYears(10);
$validator = Validator::make($request->all(), [
'firstname' => ['required'],
'email' => ['required', 'unique:users', 'digits:9'],
'phone' => ['nullable', 'unique:users', 'email:rfc,dns'],
'email1' => ['required', 'unique:client__ents,email', 'digits:9'],
'phone1' => ['nullable', 'unique:client__ents,phone', 'email:rfc,dns'],
'name' => ['required'],
'job' => ['required'],
'CNI_number' => ['required', 'unique:users', 'digits_between:7,20'],
'CNI_date' => ['required', 'date_format:d/m/Y', 'after:'.$newDate],
'CNI_place' => ['required'],
'raison_sociale' => ['required'],
'forme_juridique' => ['required'],
'siteWeb' => ['nullable', 'url'],
'activité' => ['required'],
'num_contribuable' => ['required', 'unique:client__ents,Numero_contribuable', 'between:13,14'],
'NC_date' => ['required', 'date_format:d/m/Y', 'after:'.$newDate],
'siège' => ['required'],
'email2' => ['required', 'unique:responsable_ents,email', 'digits:9'],
'phone2' => ['nullable', 'unique:responsable_ents,phone', 'email:rfc,dns'],
'CNI_number1' => ['required', 'unique:responsable_ents,CNI_number', 'digits_between:7,20'],
'password' => ['required', 'min:8'],
'confirm_password' => ['same:password'],
'checkbox' => ['accepted'],
],
['confirm_password.same' => 'Ne correspond pas',
'accepted'=>'Veuillez cocher la case avant de continuer',
'required'=>'Ce champ est obligatoire',
'phone.unique'=>'Un utilisateur avec ce mail existe déjà',
'email.unique'=>'Un utilisateur avec ce numéro existe déjà',
'phone1.unique'=>'Un utilisateur avec ce mail existe déjà',
'email1.unique'=>'Un utilisateur avec ce numéro existe déjà',
'phone2.unique'=>'Un responsable avec ce mail existe déjà',
'email2.unique'=>'Un responsable avec ce numéro existe déjà',
'CNI_number.unique'=>'Un utilisateur avec ce numéro de CNI existe déjà',
'CNI_number1.unique'=>'Un responsable avec ce numéro de CNI existe déjà',
'num_contribuable.unique'=>'Un utilisateur avec ce numéro de contribuable existe déjà',
'digits'=>'Veuillez saisir un numéro valide à 9 chiffres',
'digits_between'=>'Numéro CNI(Passeport) non-conforme',
'email'=>'Ce mail est invalide. Doit inclure #',
'date_format'=>'Invalide. Veuillez saisir une date',
'CNI_date.after'=>'Votre CNI ou Passeport ou Récépissé est expiré',
'NC_date.after'=>'Votre Numéro de contribuable est expiré',
'url'=>'Invalide. Veuillez saisir un URL',
'password.min'=>'Minimum 8 caractères',
'num_contribuable.between'=>'Numéro de contribuable non-conforme',
]);
if ($validator->fails())
{
return response()->json(['status'=>0, 'error'=>$validator->errors()->toArray()]);
}
}
<div class="modal-body step-2 m2">
<center>
<h4>Pièce d'identité</h4>
</center>
<div class="form-group">
<label>Numéro CNI(ou Passeport)<i style="color:#FF0000">*</i> :</label>
<input type="number" name="CNI_number" class="form-control" placeholder="Entrer le numéro CNI">
<div class='alert-danger CNI_number_error'></div>
</div>
<div class="form-group">
<label>Date de délivrance<i style="color:#FF0000">*</i> :</label>
<input id="demo-one-input" name="CNI_date" class="form-control" placeholder="Entrer la date">
<div class='alert-danger CNI_date_error'></div>
</div>
<div class="form-group">
<label>Lieu de délivrance<i style="color:#FF0000">*</i> :</label>
<input type="text" name="CNI_place" class="form-control" placeholder="Entrer le lieu">
<div class='alert-danger CNI_place_error'></div>
</div>
<div class="form-group">
<label>Votre photo :</label>
<input type='file' accept="image/*" name="photo" class="form-control" placeholder="image portrait">
</div>
<div class="form-group">
<i style="color:#FF0000">*</i> Champs obligatoires
</div>
</div>
There is no standard validation rule to do this, but you can create a new custom rule.
Check out the documentantion for creating and applying custom rules here:
https://laravel.com/docs/8.x/validation#custom-validation-rules
This link might not scroll down to the right place right away, make sure to look for the topic called: "Custom Validation Rules"
I have this error.
And this simple code
<div class="copyright">
<a href="/" id="footer-logo"><img src="/img/footer-logo.png"
alt="Avel Developpement, votre toute nouvelle agence web spécialisée dans la création d'applications web et mobile dans la Loire. "></a>
| © {{now()->year}} | Mentions Légales - Données personnelles
</div>
and
Route::get('/', function () {
return view('home');
});
Route::get('/mentions-legales', function () {
return view('mentions');
})->name('mentions');
Route::get('/donnees-perso', function () {
return view('donnees-perso');
})->name('donnees-perso');
I don't understand what is my mistake
Please what is the trick so that a long text of several pages (filled for example with text "Lorem ipsum ...") of unknown length (no known in advance) become visible beyond one page which is freezes (not able to see after) because skrollr ?
My simple skrollr code that bug to scrool to the end of a long text (size not fixed) beyond one page:
<div id = "corpsDiv"
data-0 = "transform: translateY (100vh)"
data-500 = "transform: translateY (100vh)"
data-900 = "transform: translateY (0vh)">
Lorem ipsum dolor sit amet. <BR>
Qui cupiditate nisi est praesentium omnis et reprehenderit veniam <BR>
Est dolor perspiciatis ea placeat quaerat <BR>
et galisum provident aut cumque iste sed reiciendis esse <BR>
... etc <BR>
</div>
As no one answered, I share with you the solution that I found to help others :
<script type="text/javascript">
/* function : recalculSkrollr()
=== Création dynamique du dernier attribut skrollr positionnant la fin du div de texte Corps de page pour pouvoir la scroller
Nota : comme le div de texte ci-dessus "corpsDiv" est dynamique (ie de hauteur inconnue à l'avance selon le contenu et la taille d'écran),
et que skrollr ne sait donc pas afficher toute sa hauteur (ne connaissant pas sa valeur non figée no plus arbitrairement par le css),
alors seule la première page de ce div de texte (positionné à 0vh par skrollr via data-0) sera visible,
sans pouvoir la scroller tant qu'un attribut skrollr, indiquant jusqu'où scroller, ne sera pas créé pour voir l'intégralité de ce div,
soit tant qu'un attribut skrollr data-{hauteur_px_du_div} indiquant une valeur égale de translation Y négative (vers le haut)
de {hauteur_vh_du_div} (vh pour être homogène avec les autres unités vh des data skrollr du div) ne sera pas dynamiquement créé,
ce qui est fait (nécessairement après ce div) ici à la fin de cette page.
*/
function recalculSkrollr() {
// Calcul du viewport height en cours (via la taille de l'écran)
screenHeight= window.innerHeight || (document.body && document.body.clientHeight) || 800;
viewHeight = screenHeight / 100; // View port (1% de la hauteur d'écran)
// Calcul hauteur du div en px (taille du div inconnue à l'avance) afin de pouvoir le scroller (ici scrollTop=0 car div par encore au-dessus du top à 0)
vcorpsDiv = document.getElementById('corpsDiv');
hauteurPxCorpsDiv = vcorpsDiv.offsetHeight;
// Garder une hauteur minimum (150 vh) pour afficher correctement un corpsDiv qui serait trop petit (skrollr perturbé sinon)
hauteurPxCorpsDiv = Math.max(hauteurPxCorpsDiv , 150 * viewHeight);
// Calcul hauteur du div (en vh) pour permettre à skrollr de translater le div vers le haut
hauteurVhCorpsDiv = Math.trunc(hauteurPxCorpsDiv / viewHeight);
// Calcul du décalage du div (en vh) vers le haut une fois entièrement scrollé (en soustrayant l'offset déjà appliqué dans la déclaration html du corpsDiv via son attribut skrollr data-0="transform:translateY(100vh)")
offsetVhCorpsDiv = 100;
decaleVhCorpsDiv = hauteurVhCorpsDiv - offsetVhCorpsDiv;
// Calcul de l'attribut skrollr (libellé et valeur du tag) à créer dynamiquement afin de pouvoir scroller entièrement le div
csstag='data-'+hauteurPxCorpsDiv;
cssvalue='transform:translateY(-'+decaleVhCorpsDiv+'vh)'; // pas besoin à priori des accolades css : cssvalue = '{' + cssvalue + '}'
// Création de l'attibut skrollr permettant de scroller le div jusqu'au bout
document.getElementById('corpsDiv').setAttribute(csstag, cssvalue);
// Création de l'attibut height du div
cssheight = hauteurVhCorpsDiv + 'vh';
document.getElementById('corpsDiv').style.height = cssheight;
}
recalculSkrollr();
// Décaler dans le temps (500ms) l'init du scroll pour laisser le temps à la page de se charger (sinon le scrollr.menu avec une url #xxx restera en haut)
setTimeout(function() {
/* ==== Initialisation du gestionnaire skrollr (voir source et doc https://prinzhorn.github.io/skrollr/ ) */
var skroller = skrollr.init({
constants: {
// Position vertical avant et après l'ouverture du portail (en px) pour l'animer dans l'image d'entete
avantportail: function() {
// Calcul d'une constante dynamique (possible aussi d'accéder à l'instance skrollr avec `this` par ex. `this.relativeToAbsolute`)
positionVhCible = 50; // position cible à atteindre en unité vh (1/100 du viewport height)
positionPxCible = positionVhCible * viewHeight;
return positionPxCible;
},
apresportail: function() {
positionVhCible = 140; // position cible à atteindre en vh
positionPxCible = positionVhCible * viewHeight;
return positionPxCible;
}
}
});
//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(skroller, {
//skrollr will smoothly animate to the new position using `animateTo`.
animate: true,
//The easing function to use.
easing: 'sqrt',
//Multiply your data-[offset] values so they match those set in skrollr.init
scale: 1,
//This event is triggered right before we jump/animate to a new hash.
change: function(newHash, newTopPosition) {
//console.log(hash, top);
}
});
}, 500);
// Recharger la page si la page change de taille afin de recalculer les attributs dynamiques de skrollr
function pageResize() {
document.location.reload();
}
window.onresize = pageResize;
</script>
I am building a custom template in WordPress and I want to handle form submission using Ajax without page reloading and I always have the following error on my console 400 bad request. The form is not submitting to the server in other to handle the request. I have tried many possibilities but I didn't succeed.
Bellow is the form,is an image upload form
<form enctype="multipart/form-data" method="post" action="">
<div class="Success-div"></div>
<p> Vous devez nous fournir un certificat médical valide attestant vos aptitudes à
faire partir du club et faire part aux activités du club:</p>
<p class="statusMsg"></p>
<div class="form-group">
<label for="tel">Certificat médical</label><a style= "color:#DAA520;" href="#"
id="effectuerTest"> (je ne possède pas un certificat médical)</a>
<input type="file" name="certificatMedicalMajeur" class="form-control"
id="CertificatMedicalfichier" accept="application/pdf" required/>
</div>
<input type="submit" name="certificat-majeur-submit" id="submitbtn" class="certificat-
majeur-submit btn btn-primary pull-right" value="Enregistrer" />
</form>
Ajax code TO send the submitted data to the server
jQuery(document).on('click', '.certificat-majeur-submit', function (e) {
e.preventDefault();
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var file_data = $('#CertificatMedicalfichier').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
var $this = $(this);
jQuery.ajax({
type: 'POST',
data: {
data:form_data,
action: 'post_md_support_save'
},
url: ajaxurl,
processData : false,
success: function (response) {
jQuery('.Success-div').html(data.message);
},
error: function (response) {
console.log("error form");
}
});
});
And finally this is the code to handle the request file in function.php
add_action( 'wp_ajax_post_md_support_save', 'md_abonnements_save' );
add_action( 'wp_ajax_post_md_support_save', 'md_abonnements_save' );
function md_abonnements_save(){
echo "ajax responding";
die();
}
If you are using this code in Front End of your website, you should also add nopriv action hook: add_action( 'wp_ajax_nopriv_post_md_support_save', 'md_abonnements_save' );
I'm crazy with this error, I'm traying to make an Ajax login form, this is my code:
My HTML:
<div id='login-box' name='login-box' class='radius-all-tiny'>
<div class='bt-wrapper bt-wrapper-hover'>
<span class='bt-icon bt-icon-hover btn-users'></span>
</div>
<div id='login-banner' name='login-banner'>
" . $content['SESSION_BANNER'] . "
</div>
<div class='radius-all-tiny' id='login-error' name='login-error'>
</div>
<form id='login-frm' name='login-frm' method='post' action='./'>
<input type='text' id='usuario' name='usuario' placeholder='" . $content['SESSION_USER'] . "' />
<input type='password' id='contrasena' name='contrasena' placeholder='" . $content['SESSION_PASS'] . "' />
<div class='submit-wrap'><input class='bt-submit radius-all-medium' type='submit' id='enviar' name='enviar' value='" . $content['CONTACT_FRM_SEND'] . "' /></div>
</form>
</div>
My JS:
<script type='text/javascript'>
$(document).ready(function() {
// FORCE BROWSER NOT CACHE AJAX CALLS
$.ajaxSetup({ cache: false });
// HIDE ERROR DIALOG
$('#login-error').hide();
// LOGIN/OUT BUTTON BEHAVIOR
$('#bt-login').click(function(){
$('#login-error').hide();
$.fancybox.open({
href : '#login-box',
padding : 0,
onClosed : function() { }
});
});
// LOADING ANIMATION
var ajaxload = '<img src=\"../img/components/spinner-dark.gif\" alt=\"" . $content['MAIN_LOADING'] . "\" />';
$('#login-frm').bind('submit', function(){
// AUTHENTICATING...
// VALIDAMOS QUE NO HAYAN CAMPOS VACÍOS
if (($('#usuario').val().length < 1) || ($('#contrasena').val().length < 1))
{
$('#login-error').html('EMPTY');
$('#login-error').show();
return false;
}
// SI NO ESTÁN VACÍOS LOS CAMPOS, ENTONCES VALIDAMOS...
$.ajax({
type: 'POST',
cache: false,
url: '../libs/class.log.in.out.php',
data: {usuario: $('#usuario').val(), contrasena: $('#contrasena').val()},
dataType: 'json',
success: function(data)
{
if (data.success)
{
// ESCRIBIMOS LA VARIABLE DE SESIÓN
// CERRAMOS FANCYBOX
$.fancybox.close();
// RECARGAMOS LA PÁGINA PRINCIPAL
document.location.href = $('#urlactual');
}
else
{
// MOSTRAMOS ERROR DE AUTENTICACIÓN
$('#login-error').html('FAILED_AUTH');
$('#login-error').show();
}
}
});
return false;
});
});
</script>
My class.log.in.out.php:
/////////////////////////////////////////////////
// TRANSPORTADOR DE DATOS
/////////////////////////////////////////////////
$data = array(
'success' => false,
'msg' => 'No se encontró ningún dato...'
);
// SOLICITAMOS LOS VALORES DE CONEXIÓN
$usr = (isset($_REQUEST['usuario']) ? $_REQUEST['usuario'] : 'NULL');
$pwd = (isset($_REQUEST['contrasena']) ? $_REQUEST['contrasena'] : 'NULL');
// VALIDAMOS LOS DATOS
class_exists('Database') || require ('class.database.php');
$resp = "";
$thisstt = false;
// INSTANCIAMOS LA CLASE DE BASE DE DATOS
$dbs = new Database();
$datos = $dbs->logIn($usr, $pwd, "", $thisstt);
if ($thisstt)
$resp = $datos['usuario'];
else
$resp = "" . $datos['error'] . " Usuario: " . $usr . "";
// DEVOLVEMOS EL ESTADO DE LA VALIDACIÓN
$data = array(
'success' => $thisstt,
'msg' => utf8_encode($resp)
);
/////////////////////////////////////////////////
// EMPAQUETADO DE DATOS
/////////////////////////////////////////////////
header("Content-Type: application/json; charset=UTF-8");
echo json_encode($data);
I receive this response from de class.log.in.out.php (Using Firefox's developer tools):
When the authentication fail:
{"success":false,"msg":"Los datos ingresados son incorrectos... Usuario: 123"}
When the authentication is correct:
{"success":true,"msg":"gchinchilla"}
But Firefox says that the Syntax is incorrect, could you help me?
I apologize for my bad english, I'm learning it...
i do not see any need of converting array to object for json_encode.
i will suggest using :
echo json_encode($data);
instead of :
echo json_encode((object)$data);
SOLVED! There was an "codification error", I have converted the PHP file from UTF-8 to UTF-8 Without BOM.
More info here: http://es.wikipedia.org/wiki/UTF-8#Byte_order_mark_.28BOM.29