Discussion :

[Praub]

Bonsoir,

Je ne suis pas expert en JS et/ou jQuery :

Mais j'utilises le plugin jQuery Validate (validate)

Voici le code du formulaire html/php :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" id="sign" autocomplete="off">
 
				<!--
				<ul id="progressbar">
					<li class="active">Username</li>
					<li>Social Network</li>
					<li>Account</li>
					<li>Human Check</li>
				</ul>  
				-->    		
 
				<!-- Username Step -->
				<fieldset class="form-group">
				<h2 class="fs-title">Choose your Username *</h2>				
				<h3 class="fs-subtitle">Who will you be ?</h3>
 
 
				<div class="fs-error"></div>
				<input type="text" class="form-control" name="uname" id="uname" placeholder="Username" value="<?php if(isset($_POST['uname'])) echo $_POST['uname'] ?>" required>
				<div id="unameDen"></div>
				<div class="mandatory">(*) mandatory</div>
 
				<button type="button" name="next" id="uname" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- // Username Step -->
 
				<!-- Social Network Step  -->
				<fieldset>
					<h2 class="fs-title">Social Profiles</h2>
					<h3 class="fs-subtitle">Your presence on the social network</h3>
 
					<input type="text" class="form-control" name="tweeturi" placeholder="Twitter Username" value="<?php if(isset($_POST['tweeturi'])) echo $_POST['tweeturi'] ?>">
 
					<input type="text" class="form-control" name="fburi" placeholder="Facebook Username" value="<?php if(isset($_POST['fburi'])) echo $_POST['fburi'] ?>">
 
					<input type="text" class="form-control" name="instauri" placeholder="Instagram Username" value="<?php if(isset($_POST['instauri'])) echo $_POST['instauri'] ?>">
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="button" name="next" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- Social Network Step  -->
 
				<!-- Create account Step  -->
				<fieldset class="form-group">
					<h2 class="fs-title">Create your account *</h2>
					<h3 class="fs-subtitle">Fill in your credentials</h3>
 
					<input type="text" class="form-control" name="mail" id="mail" placeholder="E-mail" value="<?php if(isset($_POST['mail'])) echo $_POST['mail'] ?>" autocomplete="off" required>
 
					<input type="password" class="form-control" name="pass" id="pass" placeholder="Password" autocomplete="off" required>
 
					<input type="date" class="form-control" name="dob" id="dob" value="<?php if(isset($_POST['dob'])) echo $_POST['dob'] ?>" required>
 
					<div class="mandatory">(*) mandatory</div>
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="button" name="next" class="next action-button" value="next">next</button>
				</fieldset>
				<!-- // Create account Step  -->
 
				<!-- Human Check Step -->
				<fieldset class="form-group">
					<h2 class="fs-title">Human Check *</h2>
					<h3 class="fs-subtitle">Are You Human ?</h3>
 
					<input type="text" class="form-control" name="capcode" id="capcode" value="<?php echo captcha() ?>" disabled>
 
					<input type="text" class="form-control" name="captcha" id="captcha" placeholder="CAPTCHA Code" required>
 
					<div class="mandatory">(*) mandatory</div>
 
					<button type="button" name="previous" class="previous action-button-previous" value="Previous">previous</button>
					<button type="submit" name="ProcessDataSign" id="submitbutton" class="submit action-button" value="Submit">sign up</button>
				</fieldset>
				<!-- // Human Check Step -->
				</form><!-- /form-->

Le code JS/jQuery qui check les inputs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// validating form
  $('#sign').validate({
    rules :{
      uname : {
        required : true,
        remote : {url : 'checkuname.php', type : 'post'},
        minlength : 3,
        maxlength : 25,
        pattern : /^[a-zA-Z0-9-_]+$/, 
      }, // rules uname
      fburi : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules fburi
      tweeturi : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules tweeturi
      instauri : {
        required : false,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules instauri
      mail : {
        required : true,
        email : true,
      }, // rules email
      pass : {
        required : true,
        minlength : 5,
        pattern : /^[a-zA-Z0-9-_]+$/,
      }, // rules password
      dob : {
        required : true,
      }, // rules dob
      captcha : {
        required : true,
        remote : 'dynamic/antiBot.php',
      }, // rules dob
    }, // rules
    messages : {
      uname : {
        required : 'A Username is Required !',
        minlength : 'Username need at least min. 3 characters',
        maxlength : 'Username need at least max. 25 characters',
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
        remote : 'testing',
      }, // msg uname
      fburi :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg fburi
      tweeturi :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg tweeturi
      instauri :{
        pattern : 'Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg tweeturi
      mail :{
        required : 'Your e-mail address is Required',
        email : 'The e-mail address looks invali'
      }, // msg email
      pass :{
        required : 'A password is Required',
        minlength : 'Password need at least min. 5 characters',
        pattern : 'Pass : Only Letters (aA-aZ), Numbers, Underscore and dash are allowed',
      }, // msg password
      dob : {
        required : 'A Date of birth i Required',
      }, // msg dob
      captcha : {
        required : 'Field a correct CAPTCHA Code',
        remote : 'test',
      }, // rules dob
    }, // messages
 
    onfocusout: function(element) {
        // "eager" validation
        this.element(element);  
    }
  }); // validate function

aussi le code JS/jQuery car le formulaire et multi-step :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
 
$(".next").click(function(){
  if(animating) return false;
  animating = true;
 
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
 
  //activate next step on progressbar using the index of next_fs
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 
  //show the next fieldset
  next_fs.show(); 
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = (now * 50)+"%";
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
      next_fs.css({'left': left, 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
  });
});
 
$(".previous").click(function(){
  if(animating) return false;
  animating = true;
 
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
 
  //de-activate current step on progressbar
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
 
  //show the previous fieldset
  previous_fs.show(); 
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in "now"
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = ((1-now) * 50)+"%";
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
      current_fs.hide();
      animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
  });
});
 
	$("submit").click(function(){
	  return false;
	});

et le code PHP qui est sensé effectuer la requête sql pour voir si le username existe déjà ou pas ?

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
if(!empty($_POST['uname'])){
 
	$uname = $_POST['uname'];
 
	try{
		$connect = new PDO("mysql:host=$servername;dbname=$dataname;charset=utf8", $user, $mdp);
 
		$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
		$query = $connect -> prepare ("SELECT uname FROM userlist WHERE userpn = '$uname' LIMIT 1");
 
		$query -> execute();
 
		if($query -> fetch() == 0){
			$output = true;
		}else{
			$output = false;
		}
		echo json_encode($output);
	}
 
	catch(PDOException $log){
		$query . "<br>" . $log->getMessage();
	}
 
	 $connect = null; 
}

mon problème se situe au niveau de la rules remote de uname

Quand je teste la règle remote rien ne se passe, mais je n'ai aucun soucis "a priori" avec les autres règles !

Pourriez-vous me dire au se situerai le problème ?