Question

I have a page in asp.net MVC3 project. The page has 3 divs, each div have some input fields. These divs are accessed by tab navigation and there is next button in each div on clicking next button user is navigated to next tab by jquery. On last tab there is submit button which submits the data from all the div fields in one go.

Also all input field validations happens on this Submit button click. These validations are done using jquery.validate.js and validation attributes in model class.

Now the issue here is client wants all validations from each div should be displayed on Next button click of respective div, user should not be allowed to move to next tab until he clears all the validations.

My question here is how can I trigger validation event on next button click? The constraint here is Next button will not post data it just navigat
es to next tab.

Answer 1

you could try hijacking the next button on each tab and indivdually validate the fields on the tab. If any of them fail then stop them from moving on.

    $('#tab1').click(function (e) {
      if (!$("#myform").validate().element("#specificField")){
        e.preventDefault();
      }
    });