JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<form id="myForm" class="myForm" action="" method="get" >
    <p>*Champs obligatoires.</p>
    
    <ul>
        <li>
            <label for="email">Courriel :*</label>
            <input id="email" type="text" name="email">
        </li>
        <li>
            <input id="agree" class="checkbox" type="checkbox" name="agree">
            <label for="agree">Je souhaite souscrire au Club Privilèges</label>
        </li>
    </ul>
    
    <ul class="do-agree hidden">
        <li>
            <label for="fname">Prénom :*</label>
            <input id="fname" type="text" name="fname">
        </li>
        <li>
            <label for="lname">Nom :*</label>
            <input id="lname" type="text" name="lname">
        </li>
        <li>
            <label for="telephone">Téléphone :*</label>
            <input id="telephone" type="text" name="telephone">
        </li>
        <li>
            <label for="postalcode">Code postal :*</label>
            <input id="postalcode" type="text" name="postalcode">
        </li>
    </ul>
    
    <input class="submit" type="submit" value="Valider l'inscription">
</form>

CSS

label {
    font: 18px Arial, sans-serif;
    display: block;
    margin-bottom: 5px;
    
}
input[type=text] {
    display: inline-block;
    padding: 2px;
    width: 200px;
}

.hidden {
    display: none;    
}

.visible {
    display: block;    
}

form ul {
    list-style: none;
    margin: 0;
    padding: 0;    
}

form li {
    margin: 15px 0;    
}

.checkbox {
    float: left;
    margin-right: 10px;    
}

label.error {
    font-size: 16px;
    color: #595959;
    display: inline-block;
    margin-left: 10px;
    /*padding-left: 22px;
    background: url(../images/error.png) left 50% no-repeat;*/
}

label.valid {
    /*background: url(../images/valid.png) left 50% no-repeat;*/
}

JavaScript

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$('.checkbox').on('change', function(event) {
    $('.do-agree').toggleClass('visible', 'hidden');
});

$('.myForm').validate({
    onfocusout: function(element) {
        $(element).valid()
    },
    onkeyup: function(element) {
        delay(function(){
          $(element).valid()
        }, 1000)
    },
    rules: {
        email: {
            required: true,
            email: true
        },
        fname: {
            required: function(element) {
                return $('#agree').is(':checked')
            }
        },
        lname: {
            required: function(element) {
                return $('#agree').is(':checked')
            }    
        },
        telephone: {
            required: function(element) {
                return $('#agree').is(':checked')
            },
            digits: true    
        },
        postalcode: {
            required: function(element) {
                return $('#agree').is(':checked')
            }    
        }
    },
    success: function(label) {
         label.addClass("valid").text("Ok!")
       },
    errorElement: "label",
    debug: true
});