jquery表单验证未按预期工作

时间:2017-11-08 07:49:31

标签: jquery forms validation

更新了当前可见度代码。如果重要,我正在处理.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>

2 个答案:

答案 0 :(得分:0)

  1. 您的脚本中出现错误,您正在关闭第一行中的if
  2. e.preventdefault()无关紧要e.preventDefault()
  3. 您要附加错误的班级名称,班级名称为.error,但您要追加.errors
  4. 使用表单提交活动$("#my-form").on('submit', function(e) {
  5. 见下面它可以按你的方式工作

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

答案 1 :(得分:0)

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