1

我敢肯定我一定错过了一些非常明显的东西，但我一生都看不到它是什么。

我有下面的javascript，（理论上）在我单击提交时查看表单，并告诉我是否将“RefNo”字段留空（在最终表单中将有各种字段要检查，所以我使用过class='required' 来识别它们）。但是到目前为止，当我单击提交时，什么都没有发生（除了表单提交时缺少数据）。

我尝试了在互联网上找到的各种选项，这似乎是最有希望的。

如果有人能看到我做错了什么，将不胜感激。

<html>
<head>
    <script language="JavaScript" src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function submitForm()
        {
            $("#Form1").submit(function()
                {
                    $('.required input').each(function() 
                        {
                            if ($(this).val() == '') 
                                {   
                                    $(this).addClass('highlight');
                                }
                        }
                    );

                    if ($('.required input').hasClass('highlight')) 
                        {
                            alert("Please fill in a Ref Number and try again");
                            return false;
                        }
                }   
            );
        }
    </script>
</head>
<body>

    <form method="POST" action="test9.php" name="Form1" ID="Form1">
        <input TYPE="text" ID="RefNo" NAME="RefNo" VALUE="" size="25px" class="required"></input>

        </br>

        <p>
            <input type="submit" Name="submit" id="submitButton" value="Report History" onClick='submitForm()'></input>
        </p>
    </form> 
</body>

4

5 回答 5

6

你的选择器应该是$('input.required')，不是$('.required input')。

于 2013-05-24T15:43:31.260 回答
1

首先，我认为你应该使用 Jquery 验证插件。

Ohterwise，这段代码应该可以工作：

- 在您的表单标签中添加一个 onsubmit="return submitForm()"

<form method="POST" action="test9.php" name="Form1" ID="Form1" onsubmit="return submitForm();">

-摆脱提交按钮上的onclick

- 这是 submitForm 函数：

function submitForm() {
var valid = true;

$('input[class="required"]').each(function() {
    if ($(this).val() === '') {   
        alert("One field is empty and try again");
        valid = false;
    }
});

return valid;

}

但我真的推荐 jquery.validate.js

于 2013-05-24T16:07:07.960 回答
0

您的选择器似乎有点偏离：

它应该是$('.required')

您尝试选择嵌套在Required类中的输入的方式。

于 2013-05-24T15:44:05.807 回答
0

不要在表单提交上执行此操作，而是从按钮中删除提交输入类型，并将其设置为常规按钮。

考虑到这一点，您的 javascript 应该是：

<script>
    $('#submitButton').click(function () {
        $('input.required').each(function() {
            if ($(this).val() == '') {   
                $(this).addClass('highlight');
            }
        });

        if ($('.highlight').length > 0) {
            alert("Please fill in a Ref Number and try again");
            return false;
        }
        else {
            $('#Form1').submit();
        }
    });
</script>

否则，按照您的操作方式，您必须取消活动，直到您检查丢失的数据，然后无论如何提交表单。这种方式使您不必取消操作，因为较旧的 IE 浏览器与其他浏览器甚至较新版本的 IE 执行此操作的方式不同。因此，它使您的代码更具可读性。

于 2013-05-24T15:48:56.547 回答
-1

选择器应该是$('input.required')或$('#RefNo')。

$('#RefNo')更快，因为它使用本机getElementById方法。

于 2013-05-24T15:47:48.207 回答