Jquery form validation prevent form submission

Question

i'm using Jquery form validation, the validation works but my form still submits. I have tried adding "return false" but to no avail. The online documentation also seems to overlook valid form submission actions.

Here is my code:

$(function(){

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

          rules:{

               name:{
                    required: true,
                    number: false
               }

          }

     });

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

          // DO SOME AJAX

     });

});

Thanks!

This is not showing any problem. Could you add more submit code? — Claudio Redi
– Claudio Redi, Commented Sep 17, 2013 at 12:00
are you trying to do ajax validation ? Else try .on('submit',function(){... — sakhunzai
– sakhunzai, Commented Sep 17, 2013 at 12:05
@Jeevan Jose if I put any other code in the first event binding it the code reports errors... — Alan A
– Alan A, Commented Sep 17, 2013 at 12:30

Shashank · Accepted Answer · 2013-09-17 12:15:49Z

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
    }

         });
});

edited Sep 17, 2013 at 12:15

answered Sep 17, 2013 at 12:02

Shashank

8301 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Patsy Issa Over a year ago

Should prevent default regardless of isvalidate.

Shashank Over a year ago

use prevent default wen validate returns false because we are using form.submit..

Patsy Issa Over a year ago

The ajax won't run as the form will submit and reload the page.

Shashank Over a year ago

now in this code ur preventing the default right when the validation returns false so the form wont be submitted.. only if validation returns true ajax will fire since its in the else part...

Patsy Issa Over a year ago

You do realize you need to stop the form submission if you want to submit it by ajax ?

|

Shashank · Accepted Answer · 2013-09-19 06:52:09Z

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>

Shashank · Accepted Answer · 2013-09-17 12:17:02Z

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

edited Sep 17, 2013 at 12:17

answered Sep 17, 2013 at 12:10

Shashank

8301 gold badge6 silver badges14 bronze badges

1 Comment

Alan A Over a year ago

that doesn't work, now the form submits and doesn't do the ajax call

Ryley · Accepted Answer · 2013-09-17 15:30:05Z

0

You need to use the submitHandler option of jQuery Validate:

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

 });

answered Sep 17, 2013 at 15:30

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Comments

Kiran · Accepted Answer · 2013-09-18 13:43:09Z

0

Hope you forgot to include jquery.validation.js.

Try:

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

edited Sep 18, 2013 at 13:43

answered Sep 17, 2013 at 12:00

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

4 Comments

Alan A Over a year ago

I still get the form submission

Kiran Over a year ago

preventDefault() will stop submitting form. jsfiddle.net/5gLD8. Share your code in fiddle it will be helpful to us.

Kiran Over a year ago

Yes. can you setup your code with validation method in fiddle?

Alan A Over a year ago

@unkown I created a jsfiddle here although it doesn't run 100% jsfiddle.net/rJ5pC

Collectives™ on Stack Overflow

Jquery form validation prevent form submission

5 Answers 5

9 Comments

Comments

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related