File "DEV03.php"
Full Path: /home/analogde/www/Design/fileman/Fusion/formulaire_bootstrap/DEV03.php
File size: 13.18 KB
MIME-type: text/x-php
Charset: utf-8
<?php
$errName = "";
$errEmail = "";
//echo " Faire un essai avec onInput ...";
if (isset($_POST["submit"]))
{
echo "Zoulou...";
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
{
$errEmail = 'Please enter a valid email address';
}
echo " >>>> " .$_POST['check_username'] ." " .$_POST['check_email'];
$lock = "valide";
echo '
<div class="alert alert-success" id="success-alert">
<strong>Successfully posted!</strong>
</div>';
?>
<!--
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
-->
<script type="text/javascript">
//alert("dfgsfdf");
//document.getElementById('tel2').style.visibility = 'block';
$("#tel2").hide();
/*document.addEventListener('DOMContentLoaded', (event) => {
document.querySelector('.tel2').style.display = 'none';
})*/
// le reste de ton code qui du fichier JavaScript qui correspond au contenu de ta balise body
console.log("rien de rien ...");
</script>
<?php
}
// https://stackoverflow.com/questions/65690861/bootstrap-5-0-validation-with-php-where-the-user-already-exists-in-the-database
// https://cloudrebue.co.ke/how-to-live-check-username-and-email-already-exists-in-the-database-using-php-jquery-and-ajax-mysqli/
?>
<!--
https://www.freetimelearning.com/bootstrap-snippets/bootstrap-3-main-plugins.php?Confirm-Password-Validation--Bootstrap-3-Confirm-Password-Validation&id=84
https://codewithawa.com/posts/check-if-user-already-exists-without-submitting-form
https://phppot.com/php/bootstrap-contact-form-with-javascript-validation-and-php/
onInput
https://cloudrebue.co.ke/how-to-live-check-user-exists-jquery-ajax-php/
https://www.webslesson.info/2016/02/how-to-check-username-availability-in.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Confirm Password Validation , Bootstrap 3 Confirm Password Validation</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Font icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
.conform_password_box{
border:1px solid #0099da;
padding:0px 0px 20px;
margin:15px 0px 0px;
}
.p10_15{ padding:10px 15px;}
.conform_password_box_title{
background:#0099da;
color:#FFF;
padding:15px 0px;
text-align:center;
font-size:18px;
}
.form-control{
border-radius:1px;
margin:15px 0px 5px;
padding:20px 10px;
font-size:16px;
}
.btn{ border-radius:2px !important;}
.btn-submit{
background:#0099da;
color:#FFF;
padding:10px 0px;
margin:20px 0px 0px;
font-size:16px;
}
.btn-submit:hover{ background:#0086C6; color:#FFF;}
</style>
<script>
$(document).ready(function()
{
$("#username").on("keyup", function()
{
// console.log("pipo");
console.log( $("#check_username").val() );
// var value = $(this).val().toLowerCase();
// $("#myList li").each(function() {
// $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
// });// ww w. j av a2s . c o m
});
/*$("#check_username").each(function()
{
console.log( "sdfsdfd" );
});*/
/*$('input').each(function(index)
{
console.log( $(this).val();
});*/
});
function validateEmail(email)
{
email.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ );
}
function checkemailAvailability()
{
//var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if ($("#email").val().match( /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ))
{
$("#email-validation").html("Email valide");
$("#check_email").val("email_OK");
}
else
{
$("#email-validation").html("Email non valide");
$("#check_email").val("email_NO_OK");
}
//let reponse = validateEmail(email);
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
function checkusernameAvailability()
{
//console.log("TEST");
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#username-availability-status").html(data);
//$("input:text").val("Glenn Quagmire");
// Username Available
const str = data; //'This is my example string!';
const substr = 'Available';
console.log(str.indexOf(substr));
if( str.indexOf(substr) > 0 )
{
$("#check_username").val("username_OK");
$('#submit').removeAttr('disabled');
}
else
{
$("#check_username").val("username_NO_OK");
$('#submit').attr('disabled', 'disabled');
}
//console.log(data);
//$("#check").val("Zoulou");
$("#loaderIcon").hide();
},
error:function (){}
});
//document.getElementById("checkyear").value = "1";
}
</script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="conform_password_box">
<div class="conform_password_box_title">Création d'un nouveau compte</div>
<div class="p10_15">
<form method="post" id="passwordForm" action="">
<!-- avant onBlur -->
<input type="text" name="username" id="username" value="" onInput="checkusernameAvailability()" class="form-control" required placeholder="Debug" />
<span id="username-availability-status"></span>
<input type="email" name="email" id="email" onInput="checkemailAvailability()" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" value="" class="form-control" required placeholder="adresse" />
<span id="email-availability-status"></span>
<span id="email-validation"></span>
<input type="hidden" name="check_username" id="check_username" value="">
<input type="hidden" name="check_email" id="check_email" value="">
<!--
<input type="email" name="email" id="email" onBlur="checkemailAvailability()" value="" class="form-control" required placeholder="adresse ..." /></td>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
pattern="^[_A-z0-9]{1,}$" minlength="6" placeholder="First & Last Name"
>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
</div>
-->
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="example@domain.com" >
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<input type="password" class="form-control" name="new_password" id="new_password" placeholder="New Password" autocomplete="off" required>
<div class="row">
<div class="col-sm-6">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
<span id="ucase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Uppercase Letter
</div>
<div class="col-sm-6">
<span id="lcase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Lowercase Letter<br>
<span id="num" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Number
</div>
<div class="col-sm-6">
<span id="special" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Special Character
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password" autocomplete="off" required>
<div class="row">
<div class="col-sm-12">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
</div>
</div>
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
<!--
<input type="button" class="col-xs-12 btn btn-submit btn-block" data-loading-text="Changing Password..." value="Change Password">
-->
<div class="clearfix"></div>
<div class="alert alert-success alert-dismissible fade show">
<strong>Success!</strong> Your message has been sent successfully.
</div>
<!-- Error Alert -->
<!--
<div class="alert alert-danger alert-dismissible fade show">
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
-->
<!--
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
-->
<?php
if( $lock == "valide")
{
echo '
<div class="alert alert-success" id="success-alert">
<strong>Successfully posted!</strong>
</div>';
}
?>
<div id="tel2" style="display:block">Viewing all who have been confirmed.</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("input[type=password]").keyup(function(){
var ucase = new RegExp(/[A-Z]/);
var lcase = new RegExp(/[a-z]/);
var num = new RegExp(/[0-9]/);
var special = new RegExp(/[^a-zA-Z0-9\-\/]/);
if($("#new_password").val().length >= 8){
$("#8char").removeClass("glyphicon-remove");
$("#8char").addClass("glyphicon-ok");
$("#8char").css("color","#00A41E");
}else{
$("#8char").removeClass("glyphicon-ok");
$("#8char").addClass("glyphicon-remove");
$("#8char").css("color","#FF0004");
}
if(ucase.test($("#new_password").val())){
$("#ucase").removeClass("glyphicon-remove");
$("#ucase").addClass("glyphicon-ok");
$("#ucase").css("color","#00A41E");
}else{
$("#ucase").removeClass("glyphicon-ok");
$("#ucase").addClass("glyphicon-remove");
$("#ucase").css("color","#FF0004");
}
if(lcase.test($("#new_password").val())){
$("#lcase").removeClass("glyphicon-remove");
$("#lcase").addClass("glyphicon-ok");
$("#lcase").css("color","#00A41E");
}else{
$("#lcase").removeClass("glyphicon-ok");
$("#lcase").addClass("glyphicon-remove");
$("#lcase").css("color","#FF0004");
}
if(num.test($("#new_password").val())){
$("#num").removeClass("glyphicon-remove");
$("#num").addClass("glyphicon-ok");
$("#num").css("color","#00A41E");
}else{
$("#num").removeClass("glyphicon-ok");
$("#num").addClass("glyphicon-remove");
$("#num").css("color","#FF0004");
}
if(special.test($("#new_password").val())){
$("#special").removeClass("glyphicon-remove");
$("#special").addClass("glyphicon-ok");
$("#special").css("color","#00A41E");
}else{
$("#special").removeClass("glyphicon-ok");
$("#special").addClass("glyphicon-remove");
$("#special").css("color","#FF0004");
}
if( $("#new_password").val() != "" && $("#confirm_password").val() != "" )
{
if($("#new_password").val() == $("#confirm_password").val())
{
alert("tttt");
$("#pwmatch").removeClass("glyphicon-remove");
$("#pwmatch").addClass("glyphicon-ok");
$("#pwmatch").css("color","#00A41E");
}
else
{
$("#pwmatch").removeClass("glyphicon-ok");
$("#pwmatch").addClass("glyphicon-remove");
$("#pwmatch").css("color","#FF0004");
}
}
});
</script>
</body>
</html>