在提交按钮上使用preventDefault [英] Using preventDefault on a submit button

问题描述

我正在尝试解决jQuery教科书提供的问题。它看起来像这样

即使没有输入任何条目，数据也被提交，为了解决这个问题，你必须停止提交按钮的默认动作，在文件末尾的if语句中编写事件对象的preventDefault方法，如图10-6所示。

note *这里是10中的代码-6这个不对我有用，当我把它标记在我的代码的末尾，正如本书所示。

  if（isValid == false）{event.preventDefault（）;} 
  

请记住，您用于事件对象必须与用于提交事件处理程序的参数的名称相同。

注意* submit事件处理程序看起来像这样

$ b $（
function（）{
var isValid = true;

//脚本继续验证每个文本字段相应的bla bla bla

现在，再次用空字段测试。这应该在除邮政编码字段之外的每个字段的右侧显示此字段是必需的。

我的问题是我的preventDefault不工作，它仍然会无论我尝试什么都可以提交。

从文中解释图10-6可能有帮助的一个有趣的注释，但我不太明白如下。

在这里，如果isValid变量为false，则会看到一个if语句，如果该值为true，则表示一个或多个字段无效。在这种情况下，将执行事件对象的preventDefault方法。该对象作为参数存储在事件变量中，作为该事件处理程序的第一行传递给该事件处理程序的函数。如果在将一个或多个字段提交到服务器时不使用preventDefault方法，则表单将被提交到服务器，因为这是其默认操作。

解决方案

事件变量是您的匿名函数 function（）{} 需要接受事件变量：

  $（＃email_form）。submit（function（event）{
 var isValid = true; 
 
 //在此处执行所有验证
 //如果其中一个字段为空，则可能为空
 // isValid将设置为false 
 
 if（！ isValid）{
 event.preventDefault（）; 
} 
}）; 
  

I am trying to solve a problem offered by a jQuery textbook. It reads like this

"The data is submitted even though no entries have been made, to fix this you must stop the default action of the submit button. To do that, code the preventDefault method of the event object in the if statement at the end of the file, as in figure 10-6

note* here's what the code looks like in 10-6 that's not working for me when I tag it on to the end of my code as the book suggests.

if (isValid == false) { event.preventDefault(); }

Remember that the name that you use for the event object must be the same as the name of the parameter that's used for the submit event handler.

note* the submit event handler looks like this

    $("#email_form").submit(
    function() {
        var isValid = true;

                      // the script proceeds to validate each text field accordingly                    bla bla bla

Now, test again with empty fields. This should display "This field is required" to the right of each field except the zip code field."

My problem is that my preventDefault is not working and it will still submit no matter what I try.

An interesting note from the text that explains figure 10-6 that may help, but that I don't quite understand is as follows.

"Here you see a final if statement that is true if the isValid variable is false, which means that one or more fields are invalid. In that case, the preventDefault method of the event object is executed. This object is passed to the function for the submit event handler as a parameter that's stored in the event variable by the first line in this handler. If you don't use the preventDefault method when one or more fields are submitted to the server, the form will be submitted to the server since that's its default action."

Any insight would be greatly appreciated.

解决方案

The event variable is something that must be passed to your handler. Your anonymous function function(){} needs to take in the event variable:

$("#email_form").submit(function(event){
    var isValid = true;

    // do all your validation here
    // potentially if one of the fields is empty 
    // isValid will be set to false

    if (!isValid) {
        event.preventDefault();
    }
});

这篇关于在提交按钮上使用preventDefault的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！