jquery - 使用 Sweet Alert 和 jquery 进行表单输入

Question

我有一个有两种状态的表单。在第一个状态下，所需的输入已填充，而在第二个状态下，所需的输入为空。我使用 Sweet Alert 来显示输入结果，但 if-else 无法正常工作。我的表单代码是

<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

$(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,
        });
      }
  });
});

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

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