jQuery表單驗證，單擊“提交”，檢查所有輸入字段是否為空，並顯示innerHTML錯誤不起作用？

Question

我正在嘗試使用HTML和JQuery創建表單驗證，以檢查單擊“提交”按鈕時所有輸入字段都不為空。 如果其中任何一個為空，則Submit按鈕將不會處理該表單，並且會將空的輸入字段的顏色更改為Yellow，並在表單底部顯示一條消息（在中使用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 個解決方案

解決方案1
0 2019-02-03 02:17:56

jQuery表單驗證，單擊“提交”，檢查所有輸入字段是否為空，並顯示innerHTML錯誤不起作用？

問題描述

1 個解決方案

解決方案1 0 2019-02-03 02:17:56

解決方案1
0 2019-02-03 02:17:56