проблемы, санкционировав формуляр

У меня есть формуляр, который посылает информацию в другую веб-страницу, чтобы делать операцию на BD, но я обрабатываю информацию, которого сначала я санкционировал form для того, чтобы он не послал пустые поля в BD, утверждение уже у меня есть она, но я не смог делать для того, чтобы сначала он санкционировал, и если нет пустых полей, пошлите информацию в BD, так как он в настоящее время посылает даже если - утверждение, но проистекает, того, что у меня есть js, у которого есть событие click, где предъявляют обвинение form через ajax в другую страницу и не, как делать для сначала санкционировало и потом обработало, делая доказательства, прокомментируйте функцию click и уже стоившая такая ты видишь будьте должен занимать другое событие, но не который?, это мой код:

    $('#btnGuarda').click(function () {        
        
        var cargando = $("#carga").html("<center><img class='img-responsive'  src='../imagenes/loading.gif'/><center>");

        $.ajax({
            type: 'POST',
            url: '../statussol/procesaConfirmada.vbhtml',
            data: $('#enviaConfirmada').serialize(),
            beforeSend: function () {
                $("#muestraFormulario").hide();
                cargando.show().fadeIn();
            },
            success: function (e) {
                cargando.hide();                
                $('#resultado').hide().html("<blockquote style='background: #f9f9f9; border-left: 10px solid #ccc;   margin: 1.5em 10px;  padding: 0.5em 10px;'> <p></p><p style='color:green'><i class='glyphicon glyphicon-ok-circle'></i> ¡ Operación exitosa !</p><p></p> </blockquote>").fadeIn(500);
                $('#resultado').html(e);
            }
        });
    });
/* VALIDACION A MI INPUT DEL FOMULARIO*/
    $('#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'
                    }
                }
            }
        }
    });
});

мой формуляр

<html xmlns="http://www.w3.org/1999/xhtml">

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

  <link href="../css/bootstrap.min.css" rel="stylesheet" />
  <link href="../css/bootstrapValidator.min.css" rel="stylesheet" />

  <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="../js/bootstrapValidator.min.js"></script>
  <script type="text/javascript" src="../js/scriptsConfirma.js"></script>
  <script src="../js/validate.js"></script>

</head>

<body>
  <!-- div muestra formulario -->
  <div id="muestraFormulario">
    <!-- formulario -->
    <div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i> Ingrese número</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>
      <label class="col-md-3 control-label">N° de vendedor</label>

      <div class="col-md-7">
        <input type='text' id="txtVendedor" name="txtVendedor" maxlength="4" onkeypress="ponerMayusculas(this);" class="form-control" />
      </div>
      <div class="form-group">
        <label class="control-label col-sm-9"></label>
        <div class="col-sm-3">

          <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>

</body>

</html>
1
задан 22.03.2016, 18:30
4 ответа

У меня есть формуляр, который посылает информацию в другую веб-страницу, чтобы делать операцию

Нет. У тебя нет формуляра, который посылает информацию... и это истинная проблема, которая есть в коде: формуляр никогда не послан и, следовательно, никогда ему не удается быть санкционированным.

plugin утверждения подтверждает, когда был послан формуляр, а именно, когда событие submit он бросается. И это не происходит никогда, потому что ты используешь кнопку типа button, которым формуляр не послан ни в какой сайт, в Вашем месте он называется в функцию, которая читает данные о формуляре и их посылает путь AJAX (не делая submit).

Два возможных решения проблемы:

1. Способствуй тому, чтобы формуляр был послан

Для этого, что ты должен делать, это следующее:

  1. Измени кнопку type="button" в type="submit". Таким образом формуляр будет послан, когда ты это нажмешь.

    <button type="submit" class="btn btn-success" id="btnGuarda">Guardar</button>
    
  2. Измени драйвер click и это сделай независимую функцию.

    function enviarFormulario() {   
    
        var cargando = $("#carga").html("<center><img class='img-responsive'  src='../imagenes/loading.gif'/><center>");
    
        $.ajax({
            type: 'POST',
            url: '../statussol/procesaConfirmada.vbhtml',
            data: $('#enviaConfirmada').serialize(),
            beforeSend: function () {
                $("#muestraFormulario").hide();
                cargando.show().fadeIn();
            },
            success: function (e) {
                cargando.hide();                
                $('#resultado').hide().html("<blockquote style='background: #f9f9f9; border-left: 10px solid #ccc;   margin: 1.5em 10px;  padding: 0.5em 10px;'> <p></p><p style='color:green'><i class='glyphicon glyphicon-ok-circle'></i> ¡ Operación exitosa !</p><p></p> </blockquote>").fadeIn(500);
                $('#resultado').html(e);
            }
        });
    }
    
  3. Изменись action формуляра для того, чтобы указал на функцию точки 2.

    <form id="enviaConfirmada" name="enviaConfirmada" method="post" action="javascript:enviarFormulario()" class="form-horizontal">
    

Сейчас, когда это так, когда ты нажмешь кнопку, да, что пошлет себе формуляр, но сначала произойдет утверждение plugin jQuery и, только если он будет санкционирован, назовет в новую функцию, что ты создал в шаге 2.

2. Уполномочь отправление на plugin

Если ты идешь в документацию plugin, ты можешь видеть, что есть несколько примеров, которые они показывают, как делать то, что ты хочешь. Для этого, что ты был бы должен делать, он состоит в том, чтобы добавлять другой драйвер, когда ты будешь верить в bootstrapValidator.

Оно было бы нечто похожим (я это не подтвердил, он возможно, что он содержит ошибки):

 $('#enviaConfirmada').bootstrapValidator({

     // tu código aquí, no hay necesidad de cambiar nada

 })
 .on('success.form.bv', function(e) {
        // Prevén que se mande el formulario
        e.preventDefault();
        // Obtén el formulario
        var $form = $(e.target);
        // Obtén la instancia de bootstrapValidator
        var bv = $form.data('bootstrapValidator');
        // Usa AJAX para enviar el formulario como lo estabas haciendo
        $.post(
            '../statussol/procesaConfirmada.vbhtml', 
            $form.serialize(), 
            function(result) {
                console.log(result);
            }, 
            'json'
         );
    });+

ЗАМЕТЬ - Как личная рекомендация: прекрати использовать этот plugin jQuery (или он обновляет в последнюю версию). Если ты пойдешь в страницу проекта в GitHub, ты сможешь видеть, что проект уже не вынесен, и они рекомендуют, что используется FormValidation в Вашем месте.

1
ответ дан 24.11.2019, 14:42

Ты можешь пробовать используя jquery.validate.js

$(document).ready(function(){
    var form = $('#enviaConfirmada');
    form.validate({
        rules:{
            txtNumsolicitud: {
                    required: true, // hay más reglas aplicables
                    maxlength: 10
                }
            },
            otroCampo:{
                    // reglas
                }
            }
    });

    $('#btnGuarda').click(function () {        
        var cargando = $("#carga").html("<center><img class='img-responsive'  src='../imagenes/loading.gif'/><center>");
        if(form.valid()){
            // logica ajax
        }
    });
});
1
ответ дан 24.11.2019, 14:42

Ты пробуешь помещать признак всем твоим inputs required .

Пример:

<form action="demo_form.asp">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form> 

ты Можешь санкционировать также поля в мишени перед тем, как последовательно преобразовывать формуляр и это посылать из-за ajax:

$('#btnGuarda').click(function () { 
 $("#enviaConfirmada").find("input").each(function(){
  if($(this).val() == ""){
   alert('Faltan campos por llenar');
   return false;
  }
 });
 var cargando = $("#carga").html("<center><img class='img-responsive'  src='../imagenes/loading.gif'/><center>");

 $.ajax({
  type: 'POST',
  url: '../statussol/procesaConfirmada.vbhtml',
  data: $('#enviaConfirmada').serialize(),
  beforeSend: function () {    
...
...
1
ответ дан 24.11.2019, 14:42
  • 1
    изюм, который использовал книжный магазин bootstrap, чтобы санкционировать поля, но я не сумел осуществлять ее а следовательно я сделаю это формой, которую ты комментируешь – Drago25 22.03.2016, 21:21
  • 2
    Это рекомендуемое, в самом деле ты можешь использовать регулярные выражения в js для того, чтобы у полей, которые ты просишь, был формат, в котором ты нуждаешься, даже HTML5 у него есть контроль неудар в лунку type number, восходите и т.д... w3schools.com/html/html_form_input_types.asp – Jorge Mejia 22.03.2016, 21:25
  • 3
    Drago25 не использует HTML5 а XHTML 1.0 переходный, а следовательно возможно, что required не функционирует (быть и # 237; в cuesti и # 243; n, который изменит doctype) – Alvaro Montoro♦ 22.03.2016, 21:36

<script>
$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {
            $.post(form.attr('action'), form.serialize(), function(result) {
                // The result is a JSON formatted by your back-end
                // I assume the format is as following:
                //  {
                //      valid: true,          // false if the account is not found
                //      username: 'Username', // null if the account is not found
                //  }
                if (result.valid == true || result.valid == 'true') {
                    // You can reload the current location
                    window.location.reload();

                    // Or use Javascript to update your page, such as showing the account name
                    // $('#welcome').html('Hello ' + result.username);
                } else {
                    // The account is not found
                    // Show the errors
                    $('#errors').html('The account is not found').removeClass('hide');

                    // Enable the submit buttons
                    $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
                }
            }, 'json');
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});
</script>

Шрифт: http://bv.doc.javake.cn/examples/

0
ответ дан 24.11.2019, 14:42

Теги

Похожие вопросы