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

【问题标题】：i tried an html program for checking validation for empty field but it does't working?我尝试了一个 html 程序来检查空字段的验证，但它不起作用？
【发布时间】：2015-06-04 07:35:00
【问题描述】：

我尝试了一个 html 程序来检查空字段的验证，但它不起作用？请帮助我显示我的代码中的错误是什么？代码 sn-p 如下..

我尝试了一个 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>

【问题讨论】：

你为什么不试试jQuery验证插件？

标签： html validation notnull

【解决方案1】：

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

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

【讨论】：

在页面底部包含您的验证脚本。
是在和之间吗？

【解决方案2】：

Web 应用程序框架和工具日益智能，如果 Web 开发人员社区需要改变被广泛接受和普遍使用的框架/工具，它就会被采用和推广，所有这些工具都变得如此今天对 web 开发者很友好，特别是 Rails、jQuery 等，现在你只需要谷歌你的愿望，你会发现一些可插入的、最小的设置/配置库等着你尝试:)

所以在这种情况下，只需 google 进行 html 表单输入验证。

【讨论】：

以上是在google的帮助下尝试的。但我无法解决问题.. 我是 html 的初学者

【解决方案3】：

在插件之前先添加Jquery库，检查这个fiddle。

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

【讨论】：