Plugin Controle Formulaires

ce plugin permet de contrôler tout les formulaires que nous possédons dans notre site

by Benahmed Taoufiq

HTML

<div id="divdajout">
  <fieldset>
    <legend>
      Formulaire d'ajout
    </legend>
    <table>
      <tr>
        <td>Titre1</td>
        <td>
          <input type="text" id="titreajout1" />
        </td>
        <td>Titre2</td>
        <td>
          <input type="text" id="titreajout2" />
        </td>
      </tr>
      <tr>
        <td>Chiffre1</td>
        <td>
          <input type="text" id="chiffre1" />
        </td>
        <td>Chiffre2</td>
        <td>
          <input type="text" id="chiffre2" />
        </td>
      </tr>
      <tr>
        <td>Choisire</td>
        <td>
          <select id="select1">
            <option value="-1">Choisissez</option>
            <option value="0">Valeur 0</option>
            <option value="1">valeur 1</option>
          </select>
        </td>
      </tr>
    </table>

  </fieldset>
</div>
<div id="divmodification">
  <fieldset>
    <legend>
      Formulaire de modification
    </legend>
    <table>
      <tr>
        <td>MTitre1</td>
        <td>
          <input type="text" id="titreModif1" />
        </td>
        <td>MTitre2</td>
        <td>
          <input type="text" id="titreModif2" />
        </td>
      </tr>
      <tr>
        <td>MNum1</td>
        <td>
          <input type="text" id="modifchiffre1" />
        </td>
        <td>MNum2</td>
        <td>
          <input type="text" id="modifchiffre2" />
        </td>
      </tr>
      <tr>
        <td>Choisire</td>
        <td>
          <select id="modifselect1">
            <option value="-1">Choisissez</option>
            <option value="0">Valeur 0</option>
            <option value="1">valeur 1</option>
          </select>
        </td>
      </tr>
    </table>
  </fieldset>
</div>
<a href="divdajout" class="cnt">Afficher Formulaire d'ajout</a>
<br/>
<br/>
<a href="divmodification" class="cnt">Afficher Formulaire de modification</a>
<br/>
<br/>
<div id="conteneur">
</div>

CSS

div#conteneur {
  position: absolute;
}

a.cnt {
  text-decoration: none;
  background: #BFB9B9;
  padding: .5em;
  border-radius:.6em;
  -moz-border-radius: .6em;
  -webkit-border-radius: .6em
}

.Controle {
  display: none
}

a.cnt:hover {
  background: #EBE6E6
}

#conteneur input[type=text],
#conteneur select,
.Controle input[type=text],
.Controle select {
  -webkit-border-radius: .5em;
  border-radius: .5em;
  -ms-border-radius: .5em;
  marging-top: 2em;
}

.Controle label,
.Controle td,
#conteneur td {
  vertical-align: top;
  padding: 1.4em;
  color: #3498db;
  font: obilique small-caps 700 16px serif;
  text-align: left;
}

.Controle button,
#conteneur button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 3em;
  -moz-border-radius: 3em;
  -ms-border-radius: 3em;
  border-radius: 3em;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}

.Controle button:hover,
div#conteneur button:hover {
  cursor: pointer;
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #ab0c54);
  background-image: -moz-linear-gradient(top, #3cb0fd, #ab0c54);
  background-image: -ms-linear-gradient(top, #3cb0fd, #ab0c54);
  background-image: -o-linear-gradient(top, #3cb0fd, #ab0c54);
  background-image: linear-gradient(to bottom, #3cb0fd, #ab0c54);
  text-decoration: none;
}

.Err {
  background: white;
  display: none;
  position: absolute;
  z-index: 2000;
  top: 1em;
  left: 1em;
  text-align: left;
  -webkit-border-radius: .7em;
  -moz-border-radius:.7em;
  border-radius:.7em;
  padding: .3em;
  font-family: Lucida Console;
  font-size: small;
  color:...

JavaScript

$(function() {

  $.fn.ControleFormulaire = function(Options) {
    $.fn.ControleFormulaire.defaults = {
      numeric: "default",
      text: "default",
      Blur: function() {
        $(this).css({
          "background": $(this).val().trim() == "" ? "red" : ""
        });
      }
    };
    var $params = $.extend({
      Id: 0,
      Type: "",
      nbr: 0,
      NbrText: 0,
      Lechar: "",
      regEntierOuFloat: /^[\d,]+$/i,
      NbrSelect: 0,
      valSelecteur: "",
      PresenceVirgule: -1,
      IdParent: "",
      Statut: false,
      reg_Fr_Ar_Entier: /^[a-z\d\s\u0080-\u00FF\u0100-\u017F\u0600-\u06FF]+$/i,
      TableErr: [],
      compteur: 0,
      RegExpre: {
        text: 0,
        numeric: 0
      },
      IdElement: "",
      textKeypress: function(textKey) {
        $params.Lechar = String.fromCharCode(textKey.which);
        $params.Statut = ($params.reg_Fr_Ar_Entier.test($params.Lechar));
        $(this).ActionControle();
        //alert($params.Lechar);
        return $params.Statut;
      },
      textBlur: function() {
        $params.valSelecteur = $(this).val().trim();
        $params.Statut = $params.valSelecteur != "" && $params.reg_Fr_Ar_Entier.test($params.valSelecteur);
        $(this).ActionControle();
      },
      numericKeypress: function(numKey) {
        $params.Lechar = String.fromCharCode(numKey.which);
        $params.valSelecteur = $(this).val().trim();
        $params.PresenceVirgule = $params.valSelecteur.indexOf(",");
        $params.Statut = $params.regEntierOuFloat.test($params.Lechar) &&
          (
            ($params.PresenceVirgule == -1 && (
              ($params.Lechar != "," && $params.valSelecteur != "0") || ($params.Lechar == "," && ($params.valSelecteur.length > 0))
            )) || ($params.PresenceVirgule > -1 && $params.Lechar != "," && $params.valSelecteur.substr($params.PresenceVirgule + 1).length < 2)
          );
        $(this).ActionControle();
        return $params.Statut;
      },
     ...