javascript - 防止用户发送空字段

Question

我的 jQuery 验证表单会在用户单击 “Next” 按钮时尝试发送空数据时发出警告。

无论如何，用户仍然可以通过按 Enter 发送空数据。

所以我使用了下面的代码，它使按下 Enter 与单击 “Next” 按钮相同；

// this script makes pressing Enter gives error. But empty data still goes to database.
   $('.form-horizontal').keypress(function (event) {
        if (event.which === 13) {
        $(".next").trigger('click');
        }
        });

此代码只会阻止用户进行下一步。但是，当用户点击 Enter 时，即使他看到“错误消息”，数据也会被写入数据库。

*

好吧，服务器端验证可以轻松防止这种情况发生。但是，如果我们可以更早地阻止，为什么有必要让服务器忙于处理它呢？

这是JsFiddle，你可以测试整个东西:

http://jsfiddle.net/6zu2vsj7/3/

*

有没有办法让它工作而不让服务器忙于空字段？而且我不想阻止用户按 Enter，因为这一点都不酷，也不利于用户体验。

Answer 1

您可以在将数据发送到服务器之前添加一个条件来检查表单是否有效，如下所示。希望这有助于...

// Let's act like we send to database.
            $(function(){
                $('input[type=submit]').click(function(){
                    if($("#myform").valid()){

                    $.ajax({
                        type: "POST",
                        url: "sent.php",
                        data: $("#myform").serialize(),
                        beforeSend: function(){
                            $('#stepsuccess').html('Sent to the database. Strange.');               
                        },
                        success: function(data){
                            $('#stepsuccess').html(data);

                        }
                    });
                    }
                });
            });