Jquery表单验证可防止表单提交

时间:2013-09-17 11:58:41

标签: jquery forms validation

我使用Jquery表单验证,验证工作但我的表单仍然提交。我试过添加"返回false"但无济于事。在线文档似乎也忽略了有效的表单提交操作。

这是我的代码:

$(function(){

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

          rules:{

               name:{
                    required: true,
                    number: false
               }

          }

     });

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

          // DO SOME AJAX

     });

});

谢谢!

5 个答案:

答案 0 :(得分:3)

 $(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
    }

         });
});

答案 1 :(得分: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>

答案 2 :(得分:0)

希望您忘记加入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

答案 3 :(得分:0)

    $(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

答案 4 :(得分:0)

您需要使用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
      }

 });