jquery,在尝试提交表单中的空字段时发出警报

时间:2013-05-24 15:39:10

标签: javascript jquery forms

我确信我一定错过了一些非常明显的东西,但不能为我的生活看到它是什么。

我有以下的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>

5 个答案:

答案 0 :(得分:6)

您的选择器应为$('input.required'),而不是$('.required input')

答案 1 :(得分:1)

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

但是,这段代码应该有效:

- 在表单标记中添加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

答案 2 :(得分:0)

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

应为$('.required')

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

答案 3 :(得分: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。因此,它使您的代码更具可读性。

答案 4 :(得分:-1)

选择器应为 $('input.required') $('#RefNo')

$('#RefNo')更快,因为它使用原生的 getElementById 方法。