SOLVED - FOCUS on REQUIRED INPUT FIELD, VALIDATOR JQUERYTOOLS WORKING EXAMPLE

by sebababi

HTML

<!DOCTYPE html>
<html>
<head>
  <title>widget - first error field focus</title>

  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  
</head>
<body>
 <form id="myform">
  <fieldset>
        <div class="control-group">
            <label class="control-label" for="field_1">Field 1</label>
            <div class="controls">
                <input id="field_1" name="field_1" type="text" required="required" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="field_2">Field 2</label>
            <div class="controls">
                <input id="field_2" name="field_2" type="text" required="required" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="field_3">Field 3</label>
            <div class="controls">
                <input id="field_3" name="field_3" type="text" required="required" />
            </div>
        </div>
      <div>
    </div>
  </fieldset>
<div class="form-actions">
        <input class="btn btn-primary" name="save" type="submit" value="Save" />
    </div>
    </form>
     </body>
</html>

JavaScript

$('#myform').each(function () {
    var form = $(this);
    form
        .validator({
        })
        .on('reset.validator', function () {
          remove_all_validation_markup(form);
        })
        .on('onSuccess', function (e, ok) {
          $.each(ok, function() {
            var input = $(this);
            remove_validation_markup(input);
          }); 
        })
        .on('onBeforeFail' function (e, input) {
            input.closest('form').find('.error:first').focus();
        })
        .on('onFail', function (e, errors) {
          $.each(errors, function() {
            var err = this;
            var input = $(err.input);
            remove_validation_markup(input);
            add_validation_markup(input, 'error',
              err.messages.join(' '));
          });
          return false;
        });
});
function find_container(input) {
    return input.closest('.control-group');
  }
  function remove_validation_markup(input) {
    var cont = find_container(input);
    cont.removeClass('error success warning');
    input.removeClass('error success warning');
    $('.help-inline.error, .help-inline.success, .help-inline.warning',
        cont).remove();
  }
  function add_validation_markup(input, cls, caption) {
    var cont = find_container(input);
    cont.addClass(cls);
    input.addClass(cls);
          
    if (caption) {
      var msg = $('<span class="help-inline"/>');
      msg.addClass(cls);
      msg.text(caption);
      // add error msg after last visible field to allow for multiple inline
      cont.find(":input:visible:last").after(msg);
    }       
  }
  function remove_all_validation_markup(form) {
    $('.help-inline.error, .help-inline.success, .help-inline.warning',
      form).remove(); 
    $('.error, .success, .warning', form)
      .removeClass('error success warning');
  }