JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<form>
    <p>
        <label for="cname">Nome<em>*</em></label>
    </p>
    <p>
        <input type="text" id="name" name="name" size="25" class="" value=""/>
    </p>
    <p>
        <label for="cname">Cognome<em>*</em></label>
    </p>
    <p>
        <input type="text" id="surname" name="surname" size="25" class="" value=""/>
    </p>
    <p>
        <label for="cemail">E-Mail<em>*</em></label>
    </p>
    <p>
        <input type="text" id="email" name="email" size="25"  class="" value=""/>
    </p>
    <p>
        <label for="curl">Telefono<em>*</em></label></p><p>
    <input type="text" id="tel" name="tel" size="25"  class="" value=""/>
    </p>
    <p>
        <label for="comment">Commenti:</label></p><p>
    <textarea type="text" id="comment" name="comment" cols="22"  class="">commenti vari</textarea>
    </p>
    <p class="fieldForm trattDati">
        Acconsento al <a href="">trattamento dei dati personali</a><em>*</em>: <input type="checkbox" id="acconsenti" name="acconsenti" class="" value="false"/> 
    </p>
    <p>
        <input class="submit" type="submit" value="Submit"/><br>
    </p>         
</form>

JavaScript

$("form").validate({
        submitHandler: function(form) {
              alert("ok");       
        },
          rules: {
                  
               email: {
                   required: true,
                   email: true
               },
               name: {
                   required: true
               },
               surname: {
                   required: true
               },
               tel: {
                   required: true,
                   digits: true
               }
              
          },
          errorElement: "p", 
          errorPlacement: function(error, element) {   
            error.insertAfter(element);           
        },
          messages: {
            email: {
                required: "Campo obbligatorio",
                email: "Email non valida"
            }
            ,name: "Inserisci il nome"
            ,surname: "Inserisci il cognome"
            ,tel: {
                required: "Inserisci il telefono",
                digits: "Solo numeri!"
            }
            ,acconsenti:{
                required: "Obbligatorio"
            }        
        }
  });