我尝试了一个 html 程序来检查空字段的验证，但它不起作用？

Question

我尝试了一个 html 程序来检查空字段的有效性，但它不起作用？请帮我看看我的代码有什么错误？代码片段如下..

我尝试了一个 html 程序来检查空字段的有效性，但它不起作用？

   <!DOCTYPE html>
<html lang="en">
  <head>
<style>
body
{
    padding: 10px;
    font-family:Calibri;
    font-size:12pt;
}

td
{
    padding:5px;
}
input
{
    font-family:Calibri;
    font-size:12pt;
}

span
{
    font-family:Calibri;
    font-size:9pt;
    color:red;
}

</style>    

  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

  </head>
  <body>
  <table>
<tr>
    <td>First Name:
    </td>
    <td><input type='text' id='txtFName' class="required"/ >
    </td>
</tr>
<tr>
    <td>Last Name:
    </td>
    <td><input type='text' id='txtLName' class="required"/ >
    </td>
</tr>
<tr>
    <td>Age:
    </td>
    <td><input type='text' id='txtAge'/ >
    </td>
</tr>
<tr>
    <td>Email:
    </td>
    <td><input type='text' id='txtEmail' class="required"/ >
    </td>
</tr>
<tr>
    <td colspan="2" style='text-align:center;'><input type="button" id="btnSubmit" value=" Submit ">
    </td>
</tr>
</table>

  </body>

</html>
  <script>
$(document).ready(function() {
    $('#btnSubmit').click(function(e)
     {
     alert("hai");
        var isValid = true;
        $('input[type="text"]').each(function() {
            if ($.trim($(this).val()) == '') {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
        if (isValid == false) 
            e.preventDefault();
        else 
            alert('Thank you for submitting');
    });
}); 
    </script>

Answer 1

在您的 head 标签中包含 jQuery 库并尝试。

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Answer 2

Web 应用程序框架和工具正变得越来越智能，如果 web 开发人员社区需要对 framework/tools 进行更改，该更改已被广泛接受和普遍接受，它就会被采用并推出，等等今天，工具对网络开发人员来说变得非常友好，特别是 Rails、jQuery 等，现在您只需要 google 您的愿望，您会发现一些可插入的，最小的 setup/config 个库等你试用:)

所以在这种情况下，google 用于 html 表单输入验证。

Answer 3

在插件前先添加Jquery库，勾选这个fiddle。

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

我尝试了一个 html 程序来检查空字段的验证，但它不起作用？

i tried an html program for checking validation for empty field but it does't working?

html

validation

notnull