JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

        <script src="js/jquery.js"></script>
        <script src="js/jquery.validate.js"></script>
        <script src="js/h2h-validate.js"></script>
        </head>
        <body>

            <header></header>
            <section class="container">
                <article id="form-section">
                    <div class="form-header">
                       <h1>Validação do Formulário<h1>
                    </div>
                        <form id="formH2H" action="" >
                            <div class="nmb">1</div>
                            <h3 class="title-sec">Preencha corretamento os campos.</h3>
                                <div class="form-bg">
                                    <label for="name">Nome</label>
                                    <input name="name" type="text">   
                                    <label for="portfolio-adress">Email</label>
                                    <input name="portfolio-adress" type="email"> 
                                    <label for="tel">Telefone</label>
                                    <input id="tel" name="tel" placeholder="  DDD + Número.">    
                                    <label for="cpf">CPF</label>
                                    <input id="cpf" name="cpf">    <br>  <br>
                                    <label for="cep">CEP</label>
                                    <input type="text" name="cep" onKeyPress="MascaraCep(cep);"
 maxlength="10" onBlur="ValidaCep(cep)">  
                                    <label for="date">Data</label>
                                    <input id="date" type="text" name="date">   
                                    <input type="submit" value="Enviar" />
                                </div>
                        </form>
                </article>    
            </section>
            <script>
    jQuery(function($){
          ...

JavaScript

jQuery.validator.addMethod("cpf", function(value, element) {
                   value = jQuery.trim(value);
                    value = value.replace('.','');
                    value = value.replace('.','');
                    cpf = value.replace('-','');
                    while(cpf.length < 11 ) cpf = "0"+ cpf;  
                    var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
                    var a = [];
                    var b = new Number;
                    var c = 11;
                    for (i=0; i<11; i++){
                        a[i] = cpf.charAt(i);
                        if (i < 9) b += (a[i] * --c);
                    }
                    if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
                    b = 0;
                    c = 11;
                    for (y=0; y<10; y++) b += (a[y] * c--);
                    if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
                    
                    var retorno = true;
                    if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) retorno = false;
                    
                    return this.optional(element) || retorno;

                }, "Informe um CPF válido");
                 

                $(document).ready(function(){
                 
                   $("#formH2H").validate({
                      rules: {
                          cpf: {cpf: true, required: true}
                      },
                      messages: {
                         cpf: { cpf: 'CPF inválido'}
                      }
                      ,submitHandler:function(form) {
                         alert('Muito bem, as informações estão corretas.');
                      }
                   });
                });