jquery 表单验证未按预期工作

Question

更新了当前的可见性代码。如果这很重要，我正在处理一个 .php 文件。

$(document).ready(function() {
  $("#my-form").on('submit', function(e) {
    e.preventDefault();
    $('.error').html("");

    if ($.trim($('input[name="content_id"]').val()) == '' || ($.trim($('input[name="title"]').val()) == '') || ($.trim($('input[name="image"]').val()) == '')) {

      $('.error').append(" Please ensure all required fields are filled in.");
      return false;
    } else {
      $('.error').html("*");
      $('form').submit();
    }
  });
});

.error {
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="error">* required field.</span></p>

<form method="POST" action="display.php" id="my-form">
  <!--onSubmit="return validateForm()"-->
  <table>
    <tr>
      <th>content_id</th>
      <th>title</th>
      <th>image</th>
    </tr>

    <tr>
      <td><input type="text" name="content_id" size="26"> <span class="error">*</td>
                    <td><input type="text" name="title" size="26"> <span class="error">*</span></td>
      <td><input type="text" name="image" size="26"> <span class="error">*</span></td>
    </tr>

  </table>
  <input type="button" id="cancel" name="cancel" value="Cancel"> <a href="index.php" /></a>
  <button type="submit" id="submit" value="Submit">Submit</button>
</form>

Answer 1

1. 您的脚本中有错误，您正在关闭第一行中的 if
2. e.preventdefault() 实际上不是 e.preventDefault()。
3. 你附加到错误的类名，类名是.error，但你附加到.errors。
4. 使用表单提交事件$("#my-form").on('submit', function(e) {

见下文，它可以按你的意愿工作

$(document).ready(function() {
  $("#my-form").on('submit', function(e) {
    e.preventDefault();
    $('.error').html("");

    if ($.trim($('input[name="content_id"]').val()) == '' || ($.trim($('input[name="title"]').val()) == '') || ($.trim($('input[name="image"]').val()) == '')) {

      $('.error').append(" Please ensure all required fields are filled in.");
      return false;
    } else {
      $('.error').html("*");
      $('form').submit();
    }
  });
});

.error {
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><span class="error">* required field.</span></p>

<form method="POST" action="display.php" id="my-form">
  <!--onSubmit="return validateForm()"-->
  <table>
    <tr>
      <th>content_id</th>
      <th>title</th>
      <th>image</th>
    </tr>

    <tr>
      <td><input type="text" name="content_id" size="26"> <span class="error">* <?php echo $cErr;?></span></td>
      <td><input type="text" name="title" size="26"> <span class="error">* <?php echo $tErr;?></span></td>
      <td><input type="text" name="image" size="26"> <span class="error">* <?php echo $iErr;?></span></td>
    </tr>

  </table>
  <input type="button" id="cancel" name="cancel" value="Cancel"> <a href="index.php" /></a>
  <button type="submit" id="submit" value="Submit">Submit</button>
</form>

Answer 2

正如@Muhammad Omer Aslam 提到的，你犯了一些错误，但我认为你正在寻找这个：

$(document).ready(function() {
    $('button[type="submit"]').on('click', function(e) {
            $("input").each(function(){
                if ($.trim($(this).val()) == ''){
                   $(this).next('.errors').html("* Please ensure all required fields are filled in.");
                    e.preventDefault();
                }
                else {
                    $(this).next('.errors').html("Filled");
                    $('form').submit();
                }
                
            })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="error">* required field.</span></p>

<form method="POST" action="display.php"> 
  <table>
  <tr>
    <th>content_id</th>
    <th>title</th>
    <th>image</th>
  </tr>

  <tr>
    <td><input type="text" name="content_id" size="26"> <span class="errors">*</span></td>
    <td><input type="text" name="title" size="26"> <span class="errors">*</span></td>
    <td><input type="text" name="image" size="26"> <span class="errors">*</span></td>
  </tr>

</table>

  <input type="button" id="cancel" name="cancel" value="Cancel"> <a href="index.php"/>
  <button type="submit" id="submit" value="Submit">Submit</button>
  </form>