Jquery表单验证阻止表单提交答案

【问题标题】：Jquery form validation prevent form submissionJquery表单验证阻止表单提交
【发布时间】：2013-09-17 11:58:40
【问题描述】：

我正在使用 Jquery 表单验证，验证有效，但我的表单仍然提交。我尝试添加“return false”，但无济于事。在线文档似乎也忽略了有效的表单提交操作。

这是我的代码：

$(function(){

     $("form#ticketSubmit").validate({

          rules:{

               name:{
                    required: true,
                    number: false
               }

          }

     });

     $('form#ticketSubmit').submit(function(){

          // DO SOME AJAX

     });

});

谢谢！

【问题讨论】：

这没有显示任何问题。能否添加更多submit 代码？
您是否要进行 ajax 验证？其他尝试.on('submit',function(){...
@Jeevan Jose 如果我将任何其他代码放在第一个事件绑定中，代码会报告错误...

标签： jquery forms validation

【解决方案1】：

 $(function(){

     $("form#ticketSubmit").validate({

          rules:{

               name:{
                    required: true,
                    number: false
               }

          }

     });


    $('form#ticketSubmit').submit(function(){
    var isvalidate=$("#form#ticketSubmit").valid();
            if(!isvalidate)
            {
                e.preventDefault();
                alert("invalid");
            }else{
     e.preventDefault();
    //Do AJAX
    }

         });
});

【讨论】：

无论isvalidate如何，都应该防止默认。
use prevent default wen validate 返回 false，因为我们正在使用 form.submit..
ajax 不会运行，因为表单将提交并重新加载页面。
现在在此代码中，当验证返回 false 时，您将阻止默认权限，因此不会提交表单。只有当验证返回 true 时，ajax 才会触发，因为它在 else 部分中......
您是否意识到如果您想通过 ajax 提交表单，您需要停止表单提交？

【解决方案2】：

Working Example see whether this is use-full...


<html>
      <head>
        <title>Bootstrap 101 Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
    <script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
    <script type="text/javascript">   



    jQuery.validator.addMethod("lettersonly", function(value, element) {
      return this.optional(element) || /^[a-z]+$/i.test(value);
    }, "Letters only please"); 

        jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
    });
    $(function(){
    $('#myForm').validate({
    rules: {
             myPrice:{
                required: true,
                 lettersonly: true
                //number: false
                //denominationCheck:true
                }
            }

        });

        $('#submit').click(function(){


            if($('#myForm').valid())
            {
            //doAjax
            }else{
            alert("invalid credentials");
            }

        });

    });

    </script>
      </head>
      <body>    

                <form id="myForm">
                <input id="myPrice" type="text" name="myPrice" style="float: left;"/><br>
                <button id="submit">Validate!</button>
                </form>
      </body>

    </html>

【讨论】：

【解决方案3】：

    $(function(){

         $("form#ticketSubmit").validate({

              rules:{

                   name:{
                        required: true,
                        number: false
                   }

              }

         });



        var isvalidate=$("#form#ticketSubmit").valid();
                if(!isvalidate)
                {

                    alert("invalid");
                }else{
    $('form#ticketSubmit').submit(function(){
event.preventDefault();
        //Do AJAX
    });
        }


    });

Use this

【讨论】：

这不起作用，现在表单提交并且不执行ajax调用

【解决方案4】：

您需要使用 jQuery Validate 的submitHandler 选项：

 $("form#ticketSubmit").validate({
      rules:{
           name:{
                required: true,
                number: false
           }
      },
      submitHandler: function(form){
          var data=$(form).serialize();
          //do your ajax with the data here
      }

 });

【讨论】：

【解决方案5】：

希望您忘记包含jquery.validation.js.

试试：

$(document).ready(function () { 
     $("form#ticketSubmit").validate({
          rules:{
               name:{
            required: true,
                    number: false
               }
          }          
     });    
     // if the "save to report" form is submitted 
     var isvalidate=$("#form#ticketSubmit").valid();    
     if(isvalidate){      
          $('form#ticketSubmit').submit(function(e){  
               e.preventDefault();
               var dataString=$(this).serialize();
               // Do some AJAX
          });
     }
});

DEMO FIDDLE

【讨论】：

我仍然收到表单提交
preventDefault() 将停止提交表单。 jsfiddle.net/5gLD8。在小提琴中分享您的代码，这将对我们有所帮助。
是的。你能用小提琴中的验证方法设置你的代码吗？
@unkown 我在这里创建了一个 jsfiddle 虽然它不能 100% 运行 jsfiddle.net/rJ5pC