JSFiddle - React, Tailwind, and code Playground

by jaimem

HTML

<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'></script>

<form>
    <div>
        <input type='text' name='in-0' class='test'/>        
    </div>
    <input type='submit'/>
    <input type='button' name='add' value="Add textbox"/>
</form>

<hr>
<div id='status'></div>

CSS

form{margin: 5px;}
form div{padding: 5px 0px;}
form div input{ margin: 2px 0px; display:block;}

JavaScript

$.validator.addMethod('tuRegla', function(v, el){
    return /^([0-4]\.\d|5\.0)$/.test(v);
}, 'NOPE');

$.validator.addClassRules({
    test: {tuRegla: true }
});

var updateStatus = function(status){
    $('#status').text(status);
};

$('form').validate({
  showErrors: function(map, list){
    var status = jQuery.isEmptyObject(map) ? 'ok' : JSON.stringify(map);
    updateStatus(status);
  },
  submitHandler: function() {
    updateStatus('sent');
  }
});

// Agregar campo dinamicamente
var counter = 1;
$('form > [name="add"]').on('click', function(e){
    $('form div')
      .append("<input type='text' class='test' name='in-"+ counter++ +"'>");
});