为什么提交按钮会导致其他标签？

Question

我正在尝试在“收件人：”上方显示一条虚拟消息，在“邮件”选项卡中单击“发送邮件”按钮后，只读取该框，如下所示。 但正在发生的事情不是显示消息，而是打开“常见问题”标签。您能否建议我如何在输入框顶部显示消息而无需转到常见问题选项卡。谢谢。

以下是codepen

 $("#frmDemo").submit(function(e) {
  e.preventDefault();
  var name = $("#name").val();
  var comment = $("#comment").val();
  if(name == "" || comment == "" ) {
  $("#error_message").show().html("All Fields are Required");
  } else {
 $("#error_message").html("").hide();
$.ajax({
  type: "POST",
  url: "post-form.php",
  data: "name="+name+"&comment="+comment,
  success: function(data){
    $('#success_message').fadeIn().html(data);
    setTimeout(function() {
      $('#success_message').fadeOut("slow");
    }, 2000 );

  }
});
}
});

Answer 1

尝试这样的事情：

$("form#frmDemo").submit(function(e) {

  let t = $(this);
  let name = t.find("#name").val();
  let comment = t.find("#comment").val();
  let errorMsg = t.find("#error_message");
  let successMsg = t.find("#success_message");

  if(name == "" || comment == "" ) {

    errorMsg.html("All Fields are Required").show();

  } else {

    errorMsg.html("").hide();

    $.ajax({
      type: "POST",
      url: "post-form.php",
      data: "name="+name+"&comment="+comment,
      success: function(data){
        successMsg.fadeIn().html(data);
        setTimeout(function() {
          successMsg.fadeOut("slow");
        }, 2000 );

      }
    });

  }

  e.preventDefault();
});