Formulaire de contact 2 (v2)

Revision 2 of this benchmark created on

Description

Test V4 contre V5

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
Plus d'un site sur 2 fermera ses portes d'ici 5 ans
<span id="hsers">
  Et vous ?
</span>
</h1>
<div class="sercol">
  <div class="serb">
    <h2 class="serh2">
      WordPress
    </h2>
    <p class="serbp">
      15% des sites au monde utilisent ce CMS : profitez du potentiel de WordPress !
    </p>
    <ul class="serbul">
      <li>
        Installation
      </li>
      <li>
        Charte graphique et ergonomie
      </li>
      <li>
        Référencement
      </li>
    </ul>
  </div>
  <div class="serbe">
  </div>
  <div class="serb">
    <h2 class="serh2">
      Référencement
    </h2>
    <p class="serbp">
      Positionnez votre site sur les moteurs de recherche pour attirer et fidéliser vos
      clients!
    </p>
    <ul class="serbul">
      <li>
        Audit
      </li>
      <li>
        Maillage externe &amp; interne
      </li>
      <li>
        Optimisations
      </li>
    </ul>
  </div>
  <div class="serbe">
  </div>
  <div class="serb serblast">
    <h2 class="serh2">
      WebMarketing
    </h2>
    <p class="serbp">
      Webmarketing, Réseaux sociaux et Webanalytics : 3 outils pour dominer votre marché
      !
    </p>
    <ul class="serbul">
      <li>
        Analyse du trafic
      </li>
      <li>
        Stratégie webmarketing
      </li>
      <li>
        Visibilité sur les réseaux sociaux
      </li>
    </ul>
  </div>
</div>
<form action="http://www.seomix.fr/services/" id="contactForm" method="post">
  <fieldset id="userinfo2">
    <span id="ername">
      <label for="contactName">
        Nom
      </label>
      <input name="contactName" id="contactName" value="" class="input requiredField"
      type="text">
    </span>
    <span id="eremail">
      <label for="email">
        E-mail
      </label>
      <input name="email" id="email" value="" class="input requiredField email" type="text">
    </span>
    <h2 class="contacth2">
      Ce que vous obtiendrez
    </h2>
    <ul id="contactul">
      <li class="contactli">
        Une réponse sous 3 jours ouvrés
      </li>
      <li class="contactli">
        Une étude de vos besoins réels
      </li>
    </ul>
    <h2 class="contacth2">
      Vie privée
    </h2>
    <p id="contactp">
      Les données collectées via ce formulaire ne seront jamais partagée à des tiers ni
      réutilisées dans un autre objectif
    </p>
  </fieldset>
  <fieldset id="usercomment" class="usercomment2">
    <span id="ertext">
      <label for="commentsText">
        Message
      </label>
      <textarea name="comments" id="commentsText" rows="20" cols="30" class="input texa requiredField">
      </textarea>
    </span>
    <span id="appendhere">
    </span>
    <span class="csub">
      <input name="submitted" id="submitted" value="true" type="hidden">
      <button id="submit3" onclick="_gaq.push(['pageTracker._trackEvent', 'transfo', 'transfo-services']);"
      class="inputcomment cinput" type="submit">
        Envoyer
      </button>
    </span>
  </fieldset>
</form>
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
V4
$(document).ready(function() {
  if ($('form#contactForm').length) {
    $('form#contactForm').submit(function() {
      $('form#contactForm .error').remove();
      $('#contactForm input').removeClass('inred');
      $('#contactForm textarea').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          var labelText = $(this).prev('label').text();
          $(this).parent().append('<span class="error">Merci de renseigner votre ' + labelText + '.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            var labelText = $(this).prev('label').text();
            $(this).parent().append('<span class="error">Le champ ' + labelText + ' n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $('form#contactForm').slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready
V5
$(document).ready(function() {
  if ($('#contactForm').length) {
    $('#contactForm').submit(function() {
      $('#contactForm .error').remove();
      $('#contactForm input').removeClass('inred');
      $('#contactForm textarea').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).parent().append('<span class="error">Merci de renseigner ce champ.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            $(this).parent().append('<span class="error">L\'email n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $('#contactForm').slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready
V5-meilleur-1
$(document).ready(function() {
  $('#contactForm input').click(function() {
    $(this).removeClass('inred');
  });
  $('#contactForm textarea').click(function() {
    $('#contactForm textarea').removeClass('inred');
  });
  if ($('#contactForm').length) {
    $('#contactForm').submit(function() {
      $('#contactForm .error').remove();
      $('#contactForm input').removeClass('inred');
      $('#contactForm textarea').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).parent().append('<span class="error">Merci de renseigner ce champ.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            $(this).parent().append('<span class="error">L\'email n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $('#contactForm').slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready
V5-meilleur-2
$(document).ready(function() {
  $('#contactForm input').blur(function() {
    $(this).removeClass('inred');
  });
  $('#contactForm textarea').blur(function() {
    $('#contactForm textarea').removeClass('inred');
  });
  if ($('#contactForm').length) {
    $('#contactForm').submit(function() {
      $('#contactForm .error').remove();
      $('#contactForm input').removeClass('inred');
      $('#contactForm textarea').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).parent().append('<span class="error">Merci de renseigner ce champ.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            $(this).parent().append('<span class="error">L\'email n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $('#contactForm').slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready
V5-meilleur-3
$(document).ready(function() {
  $('#email').click(function() {
    $('#email').removeClass('inred');
  });
  $('#contactName').click(function() {
    $('#contactName').removeClass('inred');
  });
  $('#commentsText').click(function() {
    $('#commentsText').removeClass('inred');
  });
  if ($('#contactForm').length) {
    $('#contactForm').submit(function() {
      $('#contactForm .error').remove();
      $('#contactForm input').removeClass('inred');
      $('#contactForm textarea').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).parent().append('<span class="error">Merci de renseigner ce champ.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            $(this).parent().append('<span class="error">L\'email n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $('#contactForm').slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready
V5-meilleur-4
$(document).ready(function() {
  var form = $('#contactForm');
  if ($(form).length) {
    $('#email').click(function() {
      $('#email').removeClass('inred');
    });
    $('#contactName').click(function() {
      $('#contactName').removeClass('inred');
    });
    $('#commentsText').click(function() {
      $('#commentsText').removeClass('inred');
    });
    $(form).submit(function() {
      $('.error').remove();
      $('#contactName').removeClass('inred');
      $('#commentsText').removeClass('inred');;
      $('#commentsText').removeClass('inred');
      var hasError = false;
      $('.requiredField').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).parent().append('<span class="error">Merci de renseigner ce champ.</span>');
          hasError = true;
        } else if ($(this).hasClass('email')) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (!emailReg.test(jQuery.trim($(this).val()))) {
            $(this).addClass('inred');
            $(this).parent().append('<span class="error">L\'email n\'est pas correctement rempli.</span>');
            hasError = true;
          }
        }
      });
      if (!hasError) {
        $('.inputcomment').fadeOut('slow', function() {});
        $('#appendhere').append('<img src="http://www.seomix.fr/wp-content/themes/seomix-8/images/loading.gif" class="cload" alt="Loading&hellip;" height="31" width="31" />');
        var formInput = $(this).serialize();
        $.post($(this).attr('action'), formInput, function(data) {
          $(form).slideUp("fast", function() {
            $(this).before('<p class="stitched"><strong>Merci !</strong> Votre email a été correctement envoyé. Je prendrais contact avec vous dès que possible.</p>');
          });
        });
      }
      return false;
    });
  }
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.