Jquery，在表单中提交空字段时发出警告

jquery, alert when trying to submit empty field in form

本文关键字：字段 警告 提交 表单 Jquery      更新时间：2023-09-26

我肯定我错过了一些非常明显的东西，但我怎么也看不出是什么。

我有下面的javascript，(理论上)看表单时，我点击提交，并告诉我，如果我留下'RefNo'字段空白(在最后的形式将有各种字段检查，所以我已经使用class='required'来识别它们)。但是到目前为止，当我单击submit时，什么也没有发生(除了表单提交了缺少的数据)。

我已经尝试了我在网上找到的各种选择，这似乎是最有前途的。

如果有人能看出我做错了什么，我将非常感激。

<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>

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

首先，我认为你应该使用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

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

应该是$('.required')

的方法是选择一个嵌套在Required类中的输入。

与其在表单提交中这样做，不如从按钮中删除提交输入类型，让它成为一个普通的按钮。

考虑到这一点，你的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)的操作方式不同。

选择器应该是美元(input.required) 或美元(# RefNo) 。

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

相关文章：