Question

我的页面上有两个表单，我在提交时隐藏了一个myForm，以便使用ajax显示其他otherForm。

为此，我需要执行函数submit_form(); onclick。由于这是在没有使用jQuery和Ajax刷新页面的情况下提交的，如果字段为空，则隐藏表单myForm而不发送数据。

如何阻止表单在提交之前隐藏或验证其字段？

这是我的表格：

<form id="myForm" method="post">
 Name:    <input name="name" id="name" type="text" /><br />
 Email:   <input name="email" id="email" type="text" /><br />
<input class="newsletter" type="button" id="submitForm" value="Send" onclick="submit_form();"/>

这是submit_form函数：

function submit_form() {
    var values = {};
    $.each($('#myForm').serializeArray(), function(i, field) {
        values[field.name] = field.value;
    });
    $('#myForm').hide();
    $('#otherForm').show();
    var name = $("#name").val();
    var email = $("#email").val();

    $.post("submit.php", { name: name, email: email, },
    function(data) {
     $('#results').html(data);
    });
}

Answer 1

使用Array#filter长度检查是否存在对象值

function submit_form() {
  var values = {};
  $.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value.trim();
  });

  if(Object.values(values).filter(a => !a).length > 0 ){
   return false
  }
  console.log(values)
  $('#myForm').hide();
  $('#otherForm').show();
  var name = $("#name").val();
  var email = $("#email").val();

  $.post("submit.php", {
      name: name,
      email: email,
    },
    function(data) {
      $('#results').html(data);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" method="post">
  Name: <input name="name" id="name" type="text" /><br /> Email: <input name="email" id="email" type="text" /><br />
  <input class="newsletter" type="button" id="submitForm" value="Send" onclick="submit_form();" />

使用Ajax进行表单验证问题而不刷新页面

1 个答案: