Question

I’m using LiveValidation of livevalidation.com for some simple and more complicated form validation on most of my projects.

Mostly to enhance user expirence.

What I did.
– replace invalid message from text to image
– when form is submited – and is not valid – focus on first not valid input field
– when form is submited – and is not valid – add red border to all not valid fields

What I’m trying to do:
– create function which be validating form – but for only on current tab

How can we do that ‘manualy’
– We could create another var automaticOnSubmit2 = field4.form.onsubmit;

Where field4 is always first input on current tab.
Because my tabs would be generated with unknown number of tabs – I’m looking for more universal solution.

I did some attempts – but my knowledge of js/jquery is very poor – so I failed.

//attempt 1

$(".ui-tabs-panel:not(.ui-tabs-hide) > form") 

• that is correct – firebug can found only 1 – open/current tab – where form which we wants to validate is located

  $(".ui-tabs-selected").ready(function() {
  var automaticOnSubmit = $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit;
   $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit = function(){
      var valid = automaticOnSubmit();
      if(valid)alert('Form is Valid!');
      else{ 
          $(".LV_invalid_field:first", document.forms).focus();
          }
      return false
  }
  

  });

Best Regards,

Peter

Answer 1

Online demo 1
Online demo 2

Zip with both

Livevalidation + jQuery UI Tabs
Solution:

$("form").each(function (i) {
    var automaticOnSubmit = this.onsubmit;
    this.onsubmit = function(){
        var valid = automaticOnSubmit();
        if(valid)alert('Form is Valid!');
        else{ 
            $(".LV_invalid_field:first", document.getElementById(this.id)).focus();
        }
        return false
    }
});