Formulaire de commentaire

Benchmark created by Daniel Roch on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="clearfix form_header">
  <div class="titleh">
    » Commentez cet article !
  </div>
  <form action="http://www.seomix.fr/wp-comments-post.php" method="post" id="comform">
    <div id="live-preview-form">
      <fieldset id="userinfo">
        <label class="labe" for="author">
          Votre nom :
        </label>
        <div class="labeldesc">
          (Merci de donner un vrai prénom ou pseudo)
        </div>
        <input name="author" id="commentauthor" class="required" type="text">
        <label class="labe" for="email">
          Votre email :
        </label>
        <div class="labeldesc">
          (Ne sera jamais publié)
        </div>
        <input name="email" id="commentemail" class="mailrequired" type="text">
        <label class="labe" for="url">
          Votre site Internet :
        </label>
        <div class="labeldesc">
          (Modèration subjective)
        </div>
        <input name="url" id="commenturl" class="urlreqred" type="text">
        <div class="notseeme" id="comavatar">
        </div>
        <div id="avr">
          <a id="avra" href="http://www.seomix.fr/gravatar/" target="_blank" title="Avoir son avatar">Votre avatar ici !</a>
        </div>
      </fieldset>
      <fieldset id="usercomment">
        <label class="labe" for="comment">
          Votre message :
        </label>
        <div class="labeldesc">
          (Html accepté)
        </div>
        <textarea name="comment" id="commentarea" class="required">
        </textarea>
        <div class="labe" id="labefin">
          » Prévisualisez votre message
        </div>
        <div id="commentpreview">
          <div id="lp-comment">
          </div>
        </div>
        <p class="subscribe-to-comments">
          <label class="label_check" for="subscribe">
            <input name="subscribe" id="subscribe" value="subscribe" style="width: auto;" type="checkbox">
            <span id="labeltext">
              Me prévenir par email des prochains commentaires
            </span>
          </label>
        </p>
        <input onclick="_gaq.push(['_setCustomVar', 1, 'type-visiteur', 'commentateur', 1]);_gaq.push(['pageTracker._trackEvent', 'transfo', 'transfo-commentaire']);"
        class="inputcomment" name="submit" id="submit" value="Je commente !" type="submit">
        <span id="appendhere">
        </span>
        <input name="comment_post_ID" value="9403" type="hidden">
        <p style="display: none;">
          <input id="akismet_comment_nonce" name="akismet_comment_nonce" value="304ecb31f2"
          type="hidden">
        </p>
      </fieldset>
    </div>
  </form>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Avant
$(document).ready(function() {
  if ($('form#comform').length) {
    $('form#comform').submit(function() {
      $('.error').remove();
      $('.error2').remove();
      $('#live-preview-form input').removeClass('inred');
      $('#live-preview-form textarea').removeClass('inred');
      var hasError = false;
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      var emailaddressVal = $("#commentemail").val();
      var urlReg = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/;
      var urladdressVal = $("#commenturl").val();
      $('.urlreqred').each(function() {
        if (jQuery.trim($('#commenturl').val()) != '') {
          if (!urlReg.test(urladdressVal)) {
            $('#commenturl').addClass('inred');
            $('#commenturl').prev('label').append('<span class="error"><span class="mycommpre urlinval"></span> URL non valide</span>');
            hasError = true;
          }
        }
      });
      $('.mailrequired').each(function() {
        if (!emailReg.test(emailaddressVal)) {
          $('#commentemail').addClass('inred');
          $('#commentemail').prev('label').append('<span class="error"><span class="mycommpre eminval"></span> Email non valide</span>');
          hasError = true;
        } else if (jQuery.trim($('#commentemail').val()) == '') {
          $('#commentemail').addClass('inred');
          $('#commentemail').prev('label').append('<span class="error"><span class="mycommpre erchamps"></span> Champs obligatoire</span>');
          hasError = true;
        }
      });
      $('.required').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).prev('label').append('<span class="error"><span class="mycommpre erchamps"></span> Champs obligatoire</span');
          hasError = true;
        }
      });
      if (hasError == true) {
        $('#appendhere').append('<div class="error2"><span class="mycommpre"></span> Ce commentaire n\'est pas valide</div>');
      };
      if (hasError == true) {
        return false;
      }
    });
  }
});
ready
après
$(document).ready(function() {
  var form = $('#comform');
  if ($(form).length) {
    $(form).submit(function() {
      $('.error').remove();
      $('.error2').remove();
      $('#commentarea').removeClass('inred');
      $('#commentemail').removeClass('inred');
      $('#commentauthor').removeClass('inred');
      $('#commenturl').removeClass('inred');
      var hasError = false;
      $('.urlreqred').each(function() {
        if (jQuery.trim($('#commenturl').val()) != '') {
          var urlReg = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/;
          var urladdressVal = $("#commenturl").val();
          if (!urlReg.test(urladdressVal)) {
            $('#commenturl').addClass('inred');
            $('#commenturl').prev('label').append('<span class="error"><span class="mycommpre urlinval"></span> URL non valide</span>');
            hasError = true;
          }
        }
      });
      $('.mailrequired').each(function() {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var emailaddressVal = $("#commentemail").val();
        if (!emailReg.test(emailaddressVal)) {
          $('#commentemail').addClass('inred');
          $('#commentemail').prev('label').append('<span class="error"><span class="mycommpre eminval"></span> Email non valide</span>');
          hasError = true;
        } else if (jQuery.trim($('#commentemail').val()) == '') {
          $('#commentemail').addClass('inred');
          $('#commentemail').prev('label').append('<span class="error"><span class="mycommpre erchamps"></span> Champs obligatoire</span>');
          hasError = true;
        }
      });
      $('.required').each(function() {
        if (jQuery.trim($(this).val()) == '') {
          $(this).addClass('inred');
          $(this).prev('label').append('<span class="error"><span class="mycommpre erchamps"></span> Champs obligatoire</span');
          hasError = true;
        }
      });
      if (hasError == true) {
        $('#appendhere').append('<div class="error2"><span class="mycommpre"></span> Ce commentaire n\'est pas valide</div>');
      };
      if (hasError == true) {
        return false;
      }
    });
  }
});
ready

Revisions

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

  • Revision 1: published by Daniel Roch on