submit form after validation jquery

Question

I have following form:

  

    
Name

        
                      

              相关标签:
       
      

Answer 1

If you want to submit the form manually, you have to bypass jQuery bound event. You can do it in either of these ways:

$('#form_id')[0].submit();

or

$('#form_id').get(0).submit();

[0] or get(0) gives you the DOM object instead of the jQuery object.

Answer 2

I do not know anything about your validation plugin, but normally u could use this peace of code

<script>

    $("form").submit(function() {
      if (validationIsTrue()) {
        return true;
      }
      else {
        return false;
      }
    });
</script>

You have to make your validation and then return true / false to the submit function of the form. If the plugin does return a bool value, you can try something like this:

$("form").submit(function() {
   return $(this).validate({ .... });
});

Answer 3

You can use submitHandler from JQuery form validate plugin

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>

Answer 4

When you say that the "date inside form is submitted" that makes no sense to me because in your code snippets I see nothing called "date".

I've used the .validate() plugin extensively... What I can tell you that may help is that the validate plugin you're using has a submitHandler function that you can use...

// validate comment form
$("#form").validate({
submitHandler : function(form) {
    //do something here
    form.submit();
}
});

The submitHandler is called only if all the rules for validation are met. Namely in your case you have three fields with "required" on them which means that this form will NOT be submitted unless all three fields have a value.

With that, I can tell you for sure that with the information provided there is nothing to indicate the problem you're describing. Providing more and better information will help us figure out what's wrong.

Answer 5

From your example, I am not clear about the control flow of your page, however, I am assuming you are calling the submit() method somewhere. After you have validated the form and before you submit it, check it's validation with the valid() method. Your code should look something like this:

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();