如何在jquery验证成功后调用jquery post方法

时间:2016-12-19 03:35:14

标签: javascript jquery

当我在验证规则中调用submithandler时,我想调用post函数来提交表单,但它没有触发。

以下是我的代码

$(function() {
    $.validator.addMethod("time", function(value, element) {
        return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
    }, "Please enter a valid time (24 Hour Format).");

    //^(([0-1]?[0-2])|([2][0-3])):([0-5]?[0-9])(a|p)m?$  12 hour
    //  /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i 24 hour
    // alert($(#isNoOfExecutionSet").val());
    jQuery.validator.setDefaults({
        highlight: function(element) {
            jQuery(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            jQuery(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'label label-danger',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
    $('#form').validate({

        rules: {
            full_name: {
                required: true,
                minlength: 3,
                maxlength: 100

                // email: true
            },
            short_name: {
                required: true,
                minlength: 3,
                maxlength: 100
                    // number: true
                    // email: true
            },
            password: {
                required: true,
                minlength: 3,
                maxlength: 100
                    // number: true
                    // email: true
            },
            total_branches: {
                required: true,
                number: true
                    // email: true
            },
            confirm: {
                equalTo: "#password"
            },
            submitHandler: function(form) {
                alert('jj');

            }
        }
    });
}); // end of function

下面是我的HTML代码

<div class="container">
    <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        <div class="modal-body">
            <div class="row">
                <div class="col-xs-12">
                    <h2> Institute Info</h2>

                    <form role="form" method="post" id="form">
                        <hr class="colorgraph">
                        <p style="color:#f0776c;float:left" id="msg"></p>

                        <div class="form-group">
                            <input type="text" class="form-control input-lg" id="full_name" name="full_name" type="full_name" value="saljdf" placeholder="Enter Full Name">
                        </div>
                        <div class="form-group">
                            <input type="tet" class="form-control input-lg" id="short_name" name="short_name" type="short_name" value="saljdf" placeholder="Enter Short Name">
                        </div>
                        <div class="form-group">
                            <input type="number" class="form-control input-lg" id="total_branches" name="total_branches" value="12" type="total_branches" placeholder="Enter Total Branches Allowed">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control input-lg" id="password" name="password" type="password" value="123" placeholder="Enter Password">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control input-lg" id="confirm" name="confirm" type="password" value="saljdf" placeholder="Confirm Password">
                        </div>
                        <div class="form-group">
                            <select class="form-control" id="status" name="status">
                                  <option value="Active" >Active</option>
                                  <option value="Non-Active" >Non-Active</option>
                              </select>
                        </div>
                        <hr class="colorgraph">
                        <div class="row">
                            <!--<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>-->
                            <div class="col-xs-12 "><button type="submit" class="btn btn-lg btn-primary btn-block" name="btnsave" value="btnsave" id="btnsave">Create Institute</button></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

你的意思是ajax调用,即jquery post方法。 您可以使用函数编写ajax调用,并且只要表单valiate从该循环/条件语句成功调用相同的ajax函数。

像。

     function myFunction(){
        // JQuery post method i.e Ajax call
     }

    $("form"). submit(function(){
       // validation cade
       if(validate){
          myFunction();
        }
    });

这不是确切的代码,我只是尝试在您可以尝试的许多项目中建议它适用于我的解决方案。