时间戳

首页 > 解决方案 > 单击提交时的 JQuery 表单验证，检查所有输入字段是否为空并显示 innerHTML 错误不起作用？

javascript - 单击提交时的 JQuery 表单验证，检查所有输入字段是否为空并显示 innerHTML 错误不起作用？

问题描述

我正在尝试使用 HTML 和 JQuery 创建表单验证，以检查单击“提交”按钮时所有输入字段是否不为空。如果其中任何一个为空，则提交按钮将不处理表单，并将空输入字段的颜色更改为黄色并在表单底部显示一条消息（在 .

这是相关的 HTML 代码：

<body>
<div id="div_main">
    <form action="process.html" method="POST">
        <div id="div_left">
    <p>Name:</p>
    <p>Age:</p>
    <p>Gender:</p>
    </div>
    <div id="div_right">
        <p><input type="text" id="name" name="name"></p>
        <p><input type="text" id="age" name="age"></p>
        <p><input type="text" id="gender" name="gender"></p>
    </div>
    <input type="submit" id="chksubmit" value="submit"/>
    <div id="divmessage"></div>
    </form>
</div>
</body>

这些是我执行验证的相关 JQuery 代码：

<script src="jquery-3.3.1.min.js"></script>
<script> 
$(document).ready(function(){
    $('#chksubmit').click(function(){
        if($('#name').val()==''){
            $('#name').css('background-color','yellow');
            $('#divmessage').append("Please enter Name.")
            success = false;
        }
    });

    $('#chksubmit').click(function(){
        if($('#age').val()==''){
            $('#age').css('background-color','yellow');
            $('#divmessage').append("<br>Please enter Age.")
            success = false;
        }
    });

    $('#chksubmit').click(function(){
        if($('#gender').val()==''){
            $('#gender').css('background-color','yellow');
            $('#divmessage').append("<br>Please enter Gender.")
            success = false;
        }
    });
});
</script>

当我单击带有空输入框的提交时，表单仍然通过而不是停止。我不知道为什么。

标签： javascriptjqueryhtmlcss

解决方案

检查以下示例

$(document).ready(function() {
  $('#chksubmit').on("click", function(e) {
    //clean divmessage
    $('#divmessage').html("");
    //or use $("#div_main form input") to check all inputs
    $("#name, #age, #gender").each(function() {
      $(this).css('background-color', '');;
      if ($(this).val().replace(/\s+/g, " ").trim() == '') {
        $(this).css('background-color', 'yellow');
        success = false;
        $('#divmessage').append("<br>Please enter " + $(this).data("for"))
      }
    });
    e.preventDefault();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div_main">
  <form action="process.html" method="POST">
    <div id="div_left">
      <p>Name:</p>
      <p>Age:</p>
      <p>Gender:</p>
    </div>
    <div id="div_right">
      <p><input type="text" data-for="Name" id="name" name="name"></p>
      <p><input type="text" data-for="Age" id="age" name="age"></p>
      <p><input type="text" data-for="Gender" id="gender" name="gender"></p>
    </div>
    <input type="submit" id="chksubmit" value="submit" />
    <div id="divmessage"></div>
  </form>
</div>

推荐阅读