Question

我有一个有两种状态的表格。在第一状态中，所需输入是填充，而在第二状态中是空的。我使用甜蜜的警报来显示输入的结果，但是如果 - 否则不能正常工作。我的表单代码是

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.css"/>
       <form method='post'>
            <input type="text" name="nombre" id="nombre" autofocus required placeholder="Escribe tu nombre (Obligatorio)"/>
            <br>
            <input type="mail" name="mail" id ="mail" required placeholder="Escribe tu correo (Obligatorio)">
            <br>
            <input type="tel" name="telefono" placeholder="Escribe tu teléfono" />
            <br>
            <textarea rows="5" cols="35" name="mensaje" id="mensaje" required placeholder="Escribe tu mensaje (Obligatorio)"  /></textarea>
            <br>
            <input type="submit" id="enviar" value="Enviar" />
        </form>

我的jquery代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.min.js"></script>
                    $("#enviar").click(function () {
                    if ($("#nombre").is(':empty')){
                        swal({
                            title: "Datos incorrectos.",
                            text: "No se ha enviado el correo.",
                            type: "warning", 
                            allowOutsideClick: false,
                            timer:5000,
                        });
                    }
                if ($("#nombre").not(':empty')){
                 swal({
                    title: "Correcto.",
                    text: "Se ha enviado el correo.",
                    type: "success", 
                    allowOutsideClick: false,
                    timer:5000,

                });
             }
        });

有什么想法吗？

Answer 1

＆＃13;

$(function() {
  $("#enviar").click(function (event) {
      
      if ($("#nombre").val()) {
        swal({
          title: "Correcto.",
          text: "Se ha enviado el correo.",
          type: "success", 
          allowOutsideClick: false,
         timer:5000,
        });
      }
      else {
        swal({
          title: "Datos incorrectos.",
          text: "No se ha enviado el correo.",
          type: "warning", 
          allowOutsideClick: false,
          timer:5000,
        });
      }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.5.0/sweet-alert.css"/>
       <form method='post'>
            <input type="text" name="nombre" id="nombre" autofocus required placeholder="Escribe tu nombre (Obligatorio)"/>
            <br>
            <input type="mail" name="mail" id ="mail" required placeholder="Escribe tu correo (Obligatorio)">
            <br>
            <input type="tel" name="telefono" placeholder="Escribe tu teléfono" />
            <br>
            <textarea rows="5" cols="35" name="mensaje" id="mensaje" required placeholder="Escribe tu mensaje (Obligatorio)"  /></textarea>
            <br>
            <input type="submit" id="enviar" value="Enviar" />
        </form>

＆＃13;

我使用$("#element").val()如果val不为空则返回true，如果为空则返回false。

表单输入带有甜蜜警报和jquery

1 个答案: