Jquery validation

JavaScript
1

Hello everyone, and thanks in advance for the help, I have this jquery validation that validates the form correctly but once the form is valid nothing happens when i click submit, when i take out the validation the submission is done correctly by php. Here is my code:

validate.js

$(document).ready(function() {


  $.validator.setDefaults({



    errorPlacement: function (error, element) {
      if (element.prop('type') === 'text') {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element.parent());
      }
    }
  });
  $.validator.addMethod('strongPassword', function(value, element) {
   return this.optional(element)
     || value.length >= 6
     && /\d/.test(value)
     && /[a-z]/i.test(value);
 }, 'Votre mot de pass doit contenir au moins six characters dont au moins un chiffre');
 $.validator.addMethod('phonenum', function(value, element) {
  return this.optional(element)
    || value.length >= 10
    && /^(0212|0)(6|7)\d{8}$/.test(value);
}, 'Entrez un numero marocain valide .');
$.validator.addMethod( "lettersonly", function( value, element ) {
	return this.optional( element ) || /^[a-z]+$/i.test( value );
}, "Seules les lettres sont accéptées." );
$.validator.addMethod( "nowhitespace", function( value, element ) {
	return this.optional( element ) || /^\S+$/i.test( value );
}, "Les espaces ne sont pas autorisés." );



               $('#singo').validate({
                   rules: {
                       username: {
                           required: true,
                           minlength: 5,
                           nowhitespace: true,
                           remote: {url:"inclss/username.php",type:'post',}

                       },
                       email: {
                           required: true,
                           email: true,
                           remote: {url:"inclss/email.php",type:'post',},

                       },
                       password: {
                         required: true,
                         strongPassword: true,
                         nowhitespace: true,
                        },
                        cemail:{
                          required: true,
                            equalTo: '#email',


                        },
                        confirm: {
        required: true,
        equalTo: '#password'
      },

                       fname: {
                         lettersonly: true,
                           required: true,
                            minlength: 5,
                            nowhitespace: true,

                       },
                       lname: {
                           required: true,
                            minlength: 5,

                       },

                       tel: {
        required: true,
        digits:true,
        phonenum: true,

      }

                   },
                   messages: {

                      email: {
      required: 'Address mail obligatoire.',
      email: 'Please enter a <em>valid</em> email address.',
      remote: $.validator.format("{0} existe déjà <a> connexion</a>"),
    },
    username: {
required: 'Pseudo obligatoire.',
username: 'Please enter a <em>valid</em> pseudo.',
remote: $.validator.format("{0} existe déjà.")
}


}





               });

            });

Php file

<?php
include('inclss/server.php');
if (!isset($_SESSION['username'])){

 ?>
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

<link rel="stylesheet" href="css/jquery-ui.css">
    <title>Tombolati - Connexion</title>

    <!-- Bootstrap core CSS -->
      <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="css/full.css" rel="stylesheet">

  </head>

  <body>

    <!-- Navigation -->
  <?php include('inclss/navi.php') ?>

    <!-- Page Content -->
    <div id="overlay"></div>



  <div class="contenu" >





  <form class="form" method="post"  id="singo" >
  <h2 class="bienvenue" style="">S'inscrire sur Tombolati</h2>
  <div class="formu">


  <div class="infoperso">
  <h4  class="subsdiv">Informations personelles</h4>
  <div class="form-group">


  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/boss.svg" alt=""></span>
  <input type="text" class="form-control" name="fname" id="fname"  placeholder=" prénom"/>
  <br>



  </div>

  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/boss.svg" alt=""></span>
  <input type="text" class="form-control" name="lname" id="lname"  placeholder=" nom"/>
  </div>
  </div>
  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/calendar.svg" alt=""></span>
  <input type="text" class="form-control" name="datepicker" id="datepicker" placeholder=" date de naissance"/>
  </div>
  </div>
  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/id-card.svg" alt=""></span>
  <input type="text" class="form-control" name="cin" id="cin"  placeholder=" numero de CIN"/>
  </div>
  </div>
  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/genders.svg" alt=""></span>
  <select class="form-control"  name="salutation" id="salutation">
  <option  disabled selected>Votre sex</option>
  <option  >Femme</option>
  <option  >Homme</option>
  </select>
  </div>
  </div>
  <style media="screen">
  .select{
  background-color: black;
  }
  </style>
  </div>
  </div>
  <div class="infoperso">
  <h4  class="subsdiv">Informations personelles</h4>


  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/placeholder.svg" alt=""></span>
  <input type="text" class="form-control" name="address" id="address"  placeholder=" address"/>
  </div>
  </div>
  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/pin.svg" alt=""></span>
  <input type="text" class="form-control" name="ville" id="ville"  placeholder=" ville"/>
  </div>
  </div>

  </div>

  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/phone.svg" alt=""></span>
  <input type="text" class="form-control" name="tel" id="tel"  placeholder=" telephone"/>
  </div>
  </div>

  </div>
  <div class="form-group">


  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/email.svg" alt=""></span>
  <input type="text" class="form-control" name="email" id="email"  placeholder=" email"/>
  </div>
  </div>
  </div>
  <div class="errordiv">

  </div>
  <div class="form-group">


  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/email.svg" alt=""></span>
  <input type="text" class="form-control" name="cemail" id="cemail"  placeholder="Confirmez votre email"/>
  </div>
  </div>
  </div>

  </div>

  <div class="infoperso">
  <h4 class="subsdiv">Informations de connexion</h4>



  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="16px" src="images/team.svg" alt=""></span>
  <input type="text" class="form-control" name="username" id="username"  placeholder=" pseudo"/>
  </div>
  </div>
  </div>
  <div class="errordiv">

  </div>
  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/padlock.svg" alt=""></span>
  <input type="password" class="form-control" name="password" id="password"  placeholder=" mot de passe souhaité"/>
  </div>
  </div>
  </div>

  <div class="form-group">

  <div class="cols-sm-10">
  <div class="input-group">
  <span class="input-group-addon"><img class="butt" width="15px" src="images/padlock.svg" alt=""></span>
  <input type="password" class="form-control" name="confirm" id="confirm"  placeholder="Confirm your Password"/>
  </div>
  </div>
  </div>
  <input type="checkbox" style="margin-left:6px" name="cg" id="cg"  value="Accepte" /> <p style="font-size:9px; display:inline; padding-left:2px">En cochant cette case vous acceptez les <a href="#">conditions generales</a></p>
  <br>
  <br>
  <div class="form-group ">
  <input type="submit" class="form-control" style="background-color:#448aff;color:#f8f8ff;" name="reg_user" value="Enregistrement"/>
  </div>
  </div>

  </div>
  <br>


  </form>



  </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript" src="js/validate.js"></script>
  <script type="text/javascript" src="js/datepick.js"></script>

  </body>
<?php }
else {
  header('index.php');
}
 ?>
</html>

I know the error is coming for the validation but I can’t put a finger on it. Your help is much appreciated.

2

Hi, did you check your JavaScript console for any errors?

3

Nothing on the console

4

Just a stab in the dark, but could it be that the remote validation fails? Otherwise the form should get submitted automatically AIUI.

If the response is OK, could you set up a small fiddle or something that reproduces the problem – just with 1 or 2 input fields? You know, with all the intermingled PHP code and various of input fields with custom validation rules it’s a bit hard for us to debug your code (if get it running in the first place)…

5

Yes when i try a simpler validation , like required only , it works fine, even withe the remote it does validate if username or address exists, but no submission even if everything is valid

6

I’m not that familiar with JS (and much less so with jQuery) but where does the form actually get submitted? Or is that bit of the code excluded as it’s not relevant to the issue?

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.