Question

我正在学习如何使用JQuery验证插件，并且遇到了一些关于在sumbit操作上运行的JQuery魔法的问题。
我有一个简单的HTML表单，它有一个输入文本字段，如下所示：

<form class="cmxform" id="commentForm" method="get" action="">
<input id="cname" name="name" size="25" class="required" minlength="2" />
<input class="submit" type="submit" value="Submit"/>
</form>

当我试图不向现场输入任何数据并按下
时，魔术就发生了提交按钮。我看到一个红色弹出的错误信息，
无论多么辛苦和多少次我按了提交按钮，没有提交任何内容。

似乎有一些脚本禁用了提交操作，
但我无法在JQuery Validatyion插件中找到哪些代码行。我想通过实例了解它的工作原理。

Answer 1

尝试按照理解这一点：

将其放在页面

中

<script type="text/javascript">
$(document).ready(function() { 
 $("#btnSubmit").click(function(){confirm("Are you sure ?");});
});

</script>

你会看到，如果你点击取消，提交动作就不会发生。这就是为什么当你在按钮中返回false时，取消回发，当你返回true时，回发就会发生。

Answer 2

我要做的是将提交按钮更改为按钮按钮，这样就不会让操作混乱。之后，您将在验证后手动提交表单。它看起来像这样：

<head>
<script type="text/javascript">

  //form validation setup
  var setupFormValidation = function(){

      //bind the click event to the new button with id submit-form
      $("#submit-form").click(function(){
          submitForm();
      });

      //setup validation on commentForm
      $("#commentForm").validate({
          errorLabelContainer: $("div#formerror"),
            rules: {
               name: { required: true }
            },
            messages:{
               name: "please enter your name"       
            }
     });

  }

  //define submitForm function
  //this manually submits form
  var submitForm = function(){
    document.cmxForm.submit();
  } 

  //document loaded 
    $(document).ready(function() {
      //set up your form validation
    setupFormValidation();            
  }); 

</script>

</head>


<!-- add your form error div -->
<div id="formerror"></div>


<!-- added name = cmfForm -->
<form class="cmxform" id="commentForm" method="get" action="" name="cmxForm">
<input id="cname" name="name" size="25" class="required" minlength="2" />

<!-- changed from submit to button with id of submit-form for jquery -->
<input type="button" class="submit" id="submit-form" value="Submit"/>

</form>

Answer 3

如果您查看JQuery Validate的examples，则以下代码会终止提交操作。

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

JQuery数据验证插件如何处理提交操作

3 个答案: