使用Jquery防止出现“提交按钮”如果字段为空，则从发布数据

本文关键字：布数据 数据 字段 如果 Jquery 提交按钮 按钮 提交 使用 | 更新日期: 2023-09-27 18:06:12

所以我在这里为我的web项目放置了一个小注册区。用户输入各种字符串，如"用户名"、"密码"等

我已经有一些代码设置，以防止重复的用户名或密码在数据库中。如果"密码"answers"重复密码"字段不匹配，我也会设置一个警卫。

我现在要做的是-

1:如果用户试图在字段为空时提交数据，则不会发布。

2:显示一个"Fields cannot be blank"的div。

我想的是将输入字段分配为"Required"类，并使用诸如

之类的代码。

if == null,告诉;返回错误;//防止函数的其他部分(提交按钮发送到login/register)被触发。

遇到淫秽问题。无论如何。以下是我目前所掌握的信息。

$("#SubmitButton").click(function () { //Click Submit
            if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
                $("#PasswordMismatch").show(); //Or this div shows you messed up
                return false; //And nothing else fires
            }

            $.post("login/register", $('#ConfirmPanel *').serialize(), function (result) {
                if (result == 2) //Json return from C#
                    $("#UsernameInUse").show(); //Shows an error div
                else if (result == 3) //Json return from C#
                    $("#EmailInUse").show(); //Shows an error div
                else {
                    $("#ConfirmPanel").dialog('close'); //Closes the registration dialog
                }
            });
        });

任何想法吗?起初，我认为我确实不能使用"class"来标记输入字段，然后将该输入字段与空值进行比较。不过我不知道。

使用Jquery防止出现“提交按钮”如果字段为空，则从发布数据

你应该在表单上使用.submit()而不是按钮上使用.click()的jquery事件处理程序。如果需要，则返回false以防止正常的表单提交。

既然您正在尝试使用$.post submit form，您应该通过始终从提交按钮单击处理程序返回false来停止表单提交的默认行为。

$("#SubmitButton").click(function () { //Click Submit
            if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
                $("#PasswordMismatch").show(); //Or this div shows you messed up
                return false; //And nothing else fires
            }

            $.post("login/register", $('#ConfirmPanel *').serialize(), function (result) {
                if (result == 2) //Json return from C#
                    $("#UsernameInUse").show(); //Shows an error div
                else if (result == 3) //Json return from C#
                    $("#EmailInUse").show(); //Shows an error div
                else {
                    $("#ConfirmPanel").dialog('close'); //Closes the registration dialog
                }
            });
            return false;
        });

jQuery防止表单提交的方法是使用preventDefault()，如:

$("#SubmitButton").click(function (event) { //Click Submit
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            event.preventDefault(); //And nothing else fires
            return;
        }
        //...
});

但是，由于您在验证通过时异步发布表单，因此您真正想要的是以下内容:

$("#SubmitButton").click(function (event) { //Click Submit
        event.preventDefault();  //we don't ever want to allow the default behavior
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            return;
        }
        //post the form
});

你建议的其余部分(使用一个类来标记每个必需的输入字段，检查它们是否都是空字符串)是合理的。

请注意，因为您绑定的是按钮的click事件而不是表单的submit事件，所以用户完全有可能在不点击按钮并触发验证代码的情况下提交表单。例如，从任意一个文本字段按回车键。

还要注意，在这种情况下，您可能会发现在表单上使用传统的onsubmit指令更方便，例如: 
<form onsubmit="validateAndPost(); return false;">
    <!-- inputs and buttons, etc. -->
</form>
<script>
    function validateAndPost() {
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            return;
        }
        //post the form
    }
</script>

示例:http://jsfiddle.net/AwxGE/

我很欣赏您使用jquery的愿望，但是我建议您使用普通的ASP。. NET ReqiredFieldValidator控件。除了使页面更加简洁和易于维护之外，它还允许您非常简单地调用服务器端验证:

public void submitbutton_click(object sender, EventArgs args){
    Page.Validate();
    if(Page.IsValid){
        doStuff();
    }
}

请不要重新发明轮子，也不要相信浏览器会像你想象的那样。

use this -

$(document).on('click', '#SubmitButton', function () { 
`enter code here`
});
相关文章：