使用AJAX

时间:2018-11-04 19:56:29

标签: ajax validation input sweetalert sweetalert2

我正在使用sweetalert2将多个输入设置为模态(带有swal mixin),并且我需要在服务器端进行验证,是否发送的值等于数据库中的值。例如,我在.php文件中仅使用一个常量值。这是我的代码:

{
  onBeforeOpen: function (dom) {
    dom.getElementsByClassName('swal2-input')[0].style = "display: none";
  },

  html:
    "<form action='' method='post'>" + 
      "<div class='main-cont'>"+
        "<span>" +
          "Por favor ingresa el codigo de verificacion NUIP "+
          "que hemos enviado a tu celular" +
        "</span>"+

        "<div class='row cuadros'>" +
          "<input id='num-1' class='inp-num' data-pos='0' type='text' maxlength='1' name='one' onkeypress='isInputNumber(event)' autofocus='autofocus'/>" +
          "<input id='num-2' class='inp-num' data-pos='1' type='text' maxlength='1' name='two' onkeypress='isInputNumber(event)'>" +
          "<input id='num-3' class='inp-num' data-pos='2' type='text' maxlength='1' name='three' onkeypress='isInputNumber(event)'>" +
          "<input id='num-4' class='inp-num' data-pos='3' type='text' maxlength='1' name='four' onkeypress='isInputNumber(event)'>" +
        "</div>" +
      "</div>"+
    "</form>",

  inputValidator: function() {
    var nums = Object.values(document.getElementsByClassName("inp-num"));

    for(var i = 0; i < nums.length; i++) {
      if(!nums[i].value) {
        return 'Ingresa el codigo completo';
      }
    }

    $.ajax({
      type:  "POST",
      url:   "php/confirma_datos.php",
      data: {
        "one":    $("#num-1").val(),
        "two":    $("#num-2").val(),
        "three":  $("#num-3").val(),
        "four":   $("#num-4").val(),
      },      
      success     :   function(response) {
        if (response == 'true') {
          swal('hola');
          return 'OK';
        } else {
          console.log('no coinciden');
        }
      },
    });
  },

  preConfirm: function () {
    return [
      $("#num-1").val(),
      $("#num-2").val(),
      $("#num-3").val(),
      $("#num-4").val(),
    ]
  },
},

我在服务器端。

    <?php
  $nuip_comp = "1234";

  $nuip = $_POST['one'] . "" . $_POST['two'] . "" . $_POST['three']. "" . $_POST['four'] ;

  if($nuip_comp == $nuip) {
    echo 'true';
  } else {
    echo 'false';
  }

我想阻止模态继续进行下一步,直到值相等为止。关于如何执行此操作的任何想法?

谢谢!

0 个答案:

没有答案