Skip to main content
adicionou 72 caracteres ao conteúdo
Fonte Link
Netinho Santos
  • 2,5mil
  • 1
  • 15
  • 20
$('#validate').validate({
  ignore: [],
  errorPlacement: function() {},
  submitHandler: function() {
    alert('Cadastro salvo com sucesso');
  },
  invalidHandler: function() {
    setTimeout(function() {
      $('.nav-tabs a small.required').remove();
      var validatePane = $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function() {
        var id = $(this).attr('id');
        $('.nav-tabs').find('a[href^="#' + id + '"]').append(' <small class="required">*</small>');
        $('.nav-tabs').find('a[href^="#' + id + '"]').tab('show');
      });
    });
  },
  rules: {
    name: 'required',
    email: {
      required: true,
      email: true
    },
    zipcode: 'required',
    address: 'required',
    city: 'required'
  }
});
input.error {
  border-color: #f00 !important;
}

small.required {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 20px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      Formulário de cadastro
    </div>
    <div class="panel-body">
      <form action="" class="form-horizontal" id="validate">
        <ul class="nav nav-tabs nav-justified nav-inline">
          <li class="active"><a href="#primary" data-toggle="tab">Informações do contato</a></li>
          <li><a href="#secondary" data-toggle="tab">Informações de endereço</a></li>
        </ul>


        <div class="tab-content tab-validate" style="margin-top:20px;">
          <div class="tab-pane active" id="primary">
            <div class="form-group">
              <label for="name" class="control-label col-md-2">Nome</label>
              <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="control-label col-md-2">E-mail</label>
              <div class="col-md-10">
                <input type="email" name="email" class="form-control" />
              </div>
            </div>
          </div>
          <div class="tab-pane" id="secondary">
            <div class="form-group">
              <label for="zipcode" class="control-label col-md-2">CEP</label>
              <div class="col-md-10">
                <input type="text" name="zipcode" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="address" class="control-label col-md-2">Endereço</label>
              <div class="col-md-10">
                <input type="text" name="address" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="city" class="control-label col-md-2">Cidade</label>
              <div class="col-md-10">
                <input type="text" name="city" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-2 pull-right">
          <button type="submit" class="btn btn-success btn-block">Salvar</button>
        </div>
      </form>
    </div>
  </div>

</div>
$('#validate').validate({
  ignore: [],
  errorPlacement: function() {},
  submitHandler: function() {
    alert('Cadastro salvo com sucesso');
  },
  invalidHandler: function() {
    setTimeout(function() {
      $('.nav-tabs a small.required').remove();
      var validatePane = $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function() {
        var id = $(this).attr('id');
        $('.nav-tabs').find('a[href^="#' + id + '"]').append(' <small class="required">*</small>');
      });
    });
  },
  rules: {
    name: 'required',
    email: {
      required: true,
      email: true
    },
    zipcode: 'required',
    address: 'required',
    city: 'required'
  }
});
input.error {
  border-color: #f00 !important;
}

small.required {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 20px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      Formulário de cadastro
    </div>
    <div class="panel-body">
      <form action="" class="form-horizontal" id="validate">
        <ul class="nav nav-tabs nav-justified nav-inline">
          <li class="active"><a href="#primary" data-toggle="tab">Informações do contato</a></li>
          <li><a href="#secondary" data-toggle="tab">Informações de endereço</a></li>
        </ul>


        <div class="tab-content tab-validate" style="margin-top:20px;">
          <div class="tab-pane active" id="primary">
            <div class="form-group">
              <label for="name" class="control-label col-md-2">Nome</label>
              <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="control-label col-md-2">E-mail</label>
              <div class="col-md-10">
                <input type="email" name="email" class="form-control" />
              </div>
            </div>
          </div>
          <div class="tab-pane" id="secondary">
            <div class="form-group">
              <label for="zipcode" class="control-label col-md-2">CEP</label>
              <div class="col-md-10">
                <input type="text" name="zipcode" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="address" class="control-label col-md-2">Endereço</label>
              <div class="col-md-10">
                <input type="text" name="address" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="city" class="control-label col-md-2">Cidade</label>
              <div class="col-md-10">
                <input type="text" name="city" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-2 pull-right">
          <button type="submit" class="btn btn-success btn-block">Salvar</button>
        </div>
      </form>
    </div>
  </div>

</div>
$('#validate').validate({
  ignore: [],
  errorPlacement: function() {},
  submitHandler: function() {
    alert('Cadastro salvo com sucesso');
  },
  invalidHandler: function() {
    setTimeout(function() {
      $('.nav-tabs a small.required').remove();
      var validatePane = $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function() {
        var id = $(this).attr('id');
        $('.nav-tabs').find('a[href^="#' + id + '"]').append(' <small class="required">*</small>');
        $('.nav-tabs').find('a[href^="#' + id + '"]').tab('show');
      });
    });
  },
  rules: {
    name: 'required',
    email: {
      required: true,
      email: true
    },
    zipcode: 'required',
    address: 'required',
    city: 'required'
  }
});
input.error {
  border-color: #f00 !important;
}

small.required {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 20px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      Formulário de cadastro
    </div>
    <div class="panel-body">
      <form action="" class="form-horizontal" id="validate">
        <ul class="nav nav-tabs nav-justified nav-inline">
          <li class="active"><a href="#primary" data-toggle="tab">Informações do contato</a></li>
          <li><a href="#secondary" data-toggle="tab">Informações de endereço</a></li>
        </ul>


        <div class="tab-content tab-validate" style="margin-top:20px;">
          <div class="tab-pane active" id="primary">
            <div class="form-group">
              <label for="name" class="control-label col-md-2">Nome</label>
              <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="control-label col-md-2">E-mail</label>
              <div class="col-md-10">
                <input type="email" name="email" class="form-control" />
              </div>
            </div>
          </div>
          <div class="tab-pane" id="secondary">
            <div class="form-group">
              <label for="zipcode" class="control-label col-md-2">CEP</label>
              <div class="col-md-10">
                <input type="text" name="zipcode" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="address" class="control-label col-md-2">Endereço</label>
              <div class="col-md-10">
                <input type="text" name="address" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="city" class="control-label col-md-2">Cidade</label>
              <div class="col-md-10">
                <input type="text" name="city" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-2 pull-right">
          <button type="submit" class="btn btn-success btn-block">Salvar</button>
        </div>
      </form>
    </div>
  </div>

</div>
Fonte Link
Netinho Santos
  • 2,5mil
  • 1
  • 15
  • 20

Segue uma solução com Jquery Validation

$('#validate').validate({
  ignore: [],
  errorPlacement: function() {},
  submitHandler: function() {
    alert('Cadastro salvo com sucesso');
  },
  invalidHandler: function() {
    setTimeout(function() {
      $('.nav-tabs a small.required').remove();
      var validatePane = $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function() {
        var id = $(this).attr('id');
        $('.nav-tabs').find('a[href^="#' + id + '"]').append(' <small class="required">*</small>');
      });
    });
  },
  rules: {
    name: 'required',
    email: {
      required: true,
      email: true
    },
    zipcode: 'required',
    address: 'required',
    city: 'required'
  }
});
input.error {
  border-color: #f00 !important;
}

small.required {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 20px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      Formulário de cadastro
    </div>
    <div class="panel-body">
      <form action="" class="form-horizontal" id="validate">
        <ul class="nav nav-tabs nav-justified nav-inline">
          <li class="active"><a href="#primary" data-toggle="tab">Informações do contato</a></li>
          <li><a href="#secondary" data-toggle="tab">Informações de endereço</a></li>
        </ul>


        <div class="tab-content tab-validate" style="margin-top:20px;">
          <div class="tab-pane active" id="primary">
            <div class="form-group">
              <label for="name" class="control-label col-md-2">Nome</label>
              <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="control-label col-md-2">E-mail</label>
              <div class="col-md-10">
                <input type="email" name="email" class="form-control" />
              </div>
            </div>
          </div>
          <div class="tab-pane" id="secondary">
            <div class="form-group">
              <label for="zipcode" class="control-label col-md-2">CEP</label>
              <div class="col-md-10">
                <input type="text" name="zipcode" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="address" class="control-label col-md-2">Endereço</label>
              <div class="col-md-10">
                <input type="text" name="address" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="city" class="control-label col-md-2">Cidade</label>
              <div class="col-md-10">
                <input type="text" name="city" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-2 pull-right">
          <button type="submit" class="btn btn-success btn-block">Salvar</button>
        </div>
      </form>
    </div>
  </div>

</div>