Question

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

这是相关的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>

当我单击“使用空白输入框提交”框时，表单仍然通过而不是停止。我不知道为什么。

Answer 1

检查以下示例

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

jQuery表单验证，单击“提交”，检查所有输入字段是否为空，并显示innerHTML错误不起作用？

1 个答案: