JSFiddle - React, Tailwind, and code Playground

by juristr

HTML

<script src="https://rawgithub.com/jzaefferer/jquery-validation/gh-pages/jquery.validate.js"></script>
<script src="https://rawgithub.com/jzaefferer/jquery-validation/gh-pages/additional-methods.js"></script>
<form class="js-jobBoerseForm form-horizontal">

    <fieldset>
      <legend>
        Testo dell'annuncio</legend>

      <p>
        Titolo/descrizione dell'annuncio</p>
        
        <label class="control-label">
          Firstname</label>
        <div class="controls">
            <input type="text" name="firstname" class="input" value=""/>
        </div>        
        
      <div class="control-group">
        <label class="control-label">
          e/o in tedesco</label>
        <div class="controls">
          <input type="text" name="titleDE" class="input-xxlarge" value=""></div>

        <div class=" mt5">
          <label class="control-label">
            in italiano</label>
          <div class="controls">
            <input type="text" name="titleIT" class="input-xxlarge" value=""></div>
        </div>
      </div>

      <p>
        Descrizione estesa dell'annuncio</p>
      <div class="control-group">
        <label class="control-label">
          e/o in tedesco</label>
        <div class="controls">
          <textarea rows="4" name="descriptionDE" class="input-xxlarge"></textarea>
        </div>
        <div class=" mt5">
          <label class="control-label">
            in italiano</label>
          <div class="controls">
            <textarea rows="4" name="descriptionIT" class="input-xxlarge"></textarea>
          </div>
        </div>
      </div>

    </fieldset>
  </form>
        
        <button class="js-firevalidation">Fire Validation</

JavaScript

$(function(){
    var validationRules = {
        rules: {
            firstname: {
                required: true  
            },
            titleDE:  {
                require_from_group: [1,"*[name=titleDE],*[name=titleIT]"]
            },
            titleIT:  {
                require_from_group: [1,"*[name=titleDE],*[name=titleIT]"]
            },
            descriptionDE:  {
                require_from_group: [1,"*[name=descriptionDE],*[name=descriptionIT]"]
            },
            descriptionIT:  {
                require_from_group: [1,"*[name=descriptionDE],*[name=descriptionIT]"]
            }            
        }
    };
    
    
    $("form").validate(validationRules);
    
    $(".js-firevalidation").click(function(){
       var result = $("form").valid(); 
        alert("Form validation result: " + result);
    });
});