1

There is lots of question and answer regarding form validation (client side) for inactive tabs, but however I couldn't do it myself right. I have three tabs on same form and using MVC data annotation, I can validate last tab(active) but it doesn't validate other 2 tabs. Here is my jquery code

var SaveUser = function () {                        
        $("#SaveUserForm").validate({
            ignore: ""
            });
        if (!$("#SaveUserForm").valid()) {
            return false;
        } else {
            var formdata = new FormData($('#SaveUserForm')[0]);
            $.ajax({
                type: "POST",
                url: "@Url.Action("SaveUser", "UserMenu")",
                data: formdata,
                processData: false,
                contentType: false,
                success: function(d) {
                    if (d.Result === 'true') {
                        alert('success');
                    } else {
                        alert('not success');
                    }
                },
                error: function() {
                }
            });
        }
        return true;
    }
  1. Is there any process that could validate inactive tabs as well?
  2. How could make error tab focus-able?

Thanks in advance....

Update Html code for tabs:

<ul class="nav nav-tabs">
            <li class="active"><a href="#activity" data-toggle="tab">Basic Information</a></li>
            <li><a href="#timeline" data-toggle="tab">Login Information</a></li>
            <li><a href="#settings" data-toggle="tab">Login Time</a></li>
</ul>

and Tabs content:

<div class="tab-content">
       <div class="tab-pane active" id="activity">
        //Some input fields
       </div>
       <div class="tab-pane" id="timeline">
        //other input fields
       </div>
       <div class="tab-pane" id="settings">
        //Input fields with
      <a href="#" class="btn btn-primary btn-flat" onclick="SaveUser()"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;Save</a>
       </div>
 </div>
Parvez
  • 187
  • 1
  • 2
  • 18
  • Do you have a single form spanning across 3 tabs or 3 different forms ? your current code is validating only one form i guess ? – Shyju Apr 09 '18 at 17:53
  • This a single form with three tabs @Shyju – Parvez Apr 09 '18 at 17:56
  • Refer [this answer](https://stackoverflow.com/questions/33935671/attaching-jquery-validation-to-replacement-element/33937362#33937362) - and remove the `$("#SaveUserForm").validate({ ignore: "" });` code in your `SaveUser` function –  Apr 09 '18 at 21:41
  • @StephenMuecke I I removed the '$("#SaveUserForm").validate({ ignore: "" });' but still it validate only last tab (settings). – Parvez Apr 10 '18 at 17:28
  • Did you add `$.validator.setDefaults({ ignore: [] });` as per the answer I linked to? –  Apr 10 '18 at 23:05
  • @StephenMuecke Thanks it works nice, Is this possible to make error tab/input fields focus-able on other tab? – Parvez Apr 11 '18 at 14:47
  • Sorry, I am not sure what you mean –  Apr 11 '18 at 22:53
  • @StephenMuecke I mean, If error in first or second tab it automatically open that particular tab. Lets say I have a required field in second tab and I ignore that input field, for now error message appear. what I want to jump on 2nd tab with this error. Similar to this [link](https://stackoverflow.com/questions/18179148/using-jquery-to-switch-to-focus-a-tab-with-a-validation-error/18179214) – Parvez Apr 12 '18 at 06:51
  • Only with some javascript (e.g. find elements with class = `input-validation-error`), but I'm not sure it makes sense. If you have an error in multiple tabs, which tab do you want to display? It might be better to validate the form controls in a tab before you go to another tab, and if not valid, prevent leaving the tab –  Apr 12 '18 at 07:00
  • For an example of validating a group of controls, refer [this answer](https://stackoverflow.com/questions/25643394/mvc-force-jquery-validation-on-group-of-elements/25645097#25645097) –  Apr 12 '18 at 07:02

0 Answers0