0

Estoy validando un campo de un formulario con Bootstrap validator pero tengo un error que me indica que "Uncaught TypeError: $(...).bootstrapValidator is not a function", agregue todas las librerías pero tampoco introducir la descripción de la imagen aquí

<form id="enviaConfirmada" name="enviaConfirmada" method="post" action="" class="form-horizontal">

  <div class="form-group">
    <label for="lblFecha" class="control-label col-sm-3">Fecha</label>
    <div class='input-group col-sm-8'>
      <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-info-sign"></span>
      </span>
      <input type='text' id="txtFecha" name="txtfecha" class="form-control" readonly="readonly" />
    </div>
    <label for="lblFecha" class="control-label col-sm-1"></label>
  </div>

  <div class="form-group">
    <label for="lblNumvendedor" class="control-label col-sm-3">N° de vendedor</label>
    <div class='input-group col-sm-8'>
      <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-question-sign"></span>
      </span>
      <input type='text' id="txtVendedor" name="txtVendedor" maxlength="4" onkeypress="ponerMayusculas(this);" class="form-control" />
    </div>
    <label for="lblNumvendedor" class="control-label col-sm-1"></label>
  </div>

  <div class="form-group">
    <label class="control-label col-sm-9"></label>
    <div class="col-sm-3">
      <!--<input type="button" name="Submit" value="Buscar" id="btn-enviar" class="btn btn-success" />-->
      <button type="button" class="btn btn-success" id="btnGuarda">Guardar</button>
    </div>
  </div>
</form>

el formulario lo mando con un button ya que uso ajax, mas o menos tengo asi algo con mi codigo para el HTML donde se encuentra el form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title></title>


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />

  <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#enviaConfirmada').bootstrapValidator({
        message: 'Este valor no es valido',
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          txtVendedor: {
            validators: {
              notEmpty: {
                message: 'El # de vendedor es requerido'
              }
            }
          }
        }
      });
    });
  </script>
</head>

<body>

  <!-- modal -->
  <div class="modal fade " id="modalVendedor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog " role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title">:: Estatus de solicitudes ::</h5>
        </div>
        <div class="modal-body">

          <!-- div muestra formulario -->
          <div id="muestraFormulario">
            <!-- formulario -->
            <div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i> Ingrese número de vendedor</div>
            <form id="enviaConfirmada" name="enviaConfirmada" method="post" action="" class="form-horizontal">

              <div class="form-group">
                <label for="lblSolicitud" class="control-label col-sm-3">N° de solicitud</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-info-sign"></span>
                  </span>
                  <input type='text' id="txtNumsolicitud" name="txtNumsolicitud" class="form-control" readonly="readonly" />
                </div>
                <label for="lblSolicitud" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label for="lblFecha" class="control-label col-sm-3">Fecha</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-info-sign"></span>
                  </span>
                  <input type='text' id="txtFecha" name="txtfecha" class="form-control" readonly="readonly" />
                </div>
                <label for="lblFecha" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label for="lblNumvendedor" class="control-label col-sm-3">N° de vendedor</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-question-sign"></span>
                  </span>
                  <input type='text' id="txtVendedor" name="txtVendedor" maxlength="4" onkeypress="ponerMayusculas(this);" class="form-control" />
                </div>
                <label for="lblNumvendedor" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-9"></label>
                <div class="col-sm-3">
                  <!--<input type="button" name="Submit" value="Buscar" id="btn-enviar" class="btn btn-success" />-->
                  <button type="button" class="btn btn-success" id="btnGuarda">Guardar</button>
                </div>
              </div>
            </form>
            <!-- fin formulario -->
          </div>
          <!-- div muestra formulario -->
          <div id="carga"></div>
          <div id="resultado"></div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          <!--<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modalNo" data-whatever="no">No</button>-->
        </div>
      </div>
    </div>
  </div>
  <!-- modal -->
</body>

</html>

9

2 respuestas 2

1

Esa libreria de acuerdo a la página que estas enlazando de cdnjs funciona con formValidation.

http://formvalidation.io/getting-started/

0

El problema está en el orden:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />
  <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>

Como puedes ver primero tratas de jalar el plugin de validaciones antes de jquery, basta con invertir el órden

  <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />

 $(document).ready(function() {
      $('#enviaConfirmada').bootstrapValidator({
        message: 'Este valor no es valido',
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          txtVendedor: {
            validators: {
              notEmpty: {
                message: 'El # de vendedor es requerido'
              }
            }
          }
        }
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>


  <!-- modal -->
  <div class="  " id="modalVendedor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog " role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title">:: Estatus de solicitudes ::</h5>
        </div>
        <div class="modal-body">

          <!-- div muestra formulario -->
          <div id="muestraFormulario">
            <!-- formulario -->
            <div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i> Ingrese número de vendedor</div>
            <form id="enviaConfirmada" name="enviaConfirmada" method="post" action="" class="form-horizontal">

              <div class="form-group">
                <label for="lblSolicitud" class="control-label col-sm-3">N° de solicitud</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-info-sign"></span>
                  </span>
                  <input type='text' id="txtNumsolicitud" name="txtNumsolicitud" class="form-control" readonly="readonly" />
                </div>
                <label for="lblSolicitud" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label for="lblFecha" class="control-label col-sm-3">Fecha</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-info-sign"></span>
                  </span>
                  <input type='text' id="txtFecha" name="txtfecha" class="form-control" readonly="readonly" />
                </div>
                <label for="lblFecha" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label for="lblNumvendedor" class="control-label col-sm-3">N° de vendedor</label>
                <div class='input-group col-sm-8'>
                  <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-question-sign"></span>
                  </span>
                  <input type='text' id="txtVendedor" name="txtVendedor" maxlength="4" onkeypress="ponerMayusculas(this);" class="form-control" />
                </div>
                <label for="lblNumvendedor" class="control-label col-sm-1"></label>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-9"></label>
                <div class="col-sm-3">
                  <!--<input type="button" name="Submit" value="Buscar" id="btn-enviar" class="btn btn-success" />-->
                  <button type="button" class="btn btn-success" id="btnGuarda">Guardar</button>
                </div>
              </div>
            </form>
            <!-- fin formulario -->
          </div>
          <!-- div muestra formulario -->
          <div id="carga"></div>
          <div id="resultado"></div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          <!--<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modalNo" data-whatever="no">No</button>-->
        </div>
      </div>
    </div>
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.