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 id='status'></div>
    <input type='text' name='in'/>
    <input type='submit'/>
</form>

CSS

#status{
    height: 20px;
    width: 100px;
}

JavaScript

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

var updateStatus = function(status){
    $('#status').fadeOut(function(e){
        $(this).text(status).fadeIn();
    });
};

$('form').validate({
  rules:{
      in:{ tuRegla: true }
  },
  showErrors: function(map, list){
      updateStatus(map.in || 'ok');
  },
  submitHandler: function() { 
      updateStatus("sent");
  }
});