运行 JQuery-验证后的 JS 函数

Question

我有一个 WebForm，一旦通过验证，它就会通过 SQL 查询写入数据库。我可以让验证独立工作。我可以让数据独立写入（当我向按钮添加 onclick 事件时）。但我不能让他们连续工作。如何在成功 jQuery 验证后调用 javascript 函数？代码如下。

activitylog.html

<form action="javascript:;" id="form_rptActivityLog">
    <input id="txtShiftDate" type="text" class="form-control date-picker" name="txtShiftDate"/>
    <input type="submit" id="btnSave" value="Save" title="Save" class="btn blue-hoki" />
</form>

<script type="text/javascript">
function saveData() { // ... SQL DATA WRITE HERE ... // }
</script>

validation.js

var ValidationScripting = function() {


// ACTIVITY LOG ICON VALIDATION
var rptActivityLogValidation = function() {
    // for more info visit the official plugin documentation: http://docs.jquery.com/Plugins/Validation

    var form = $('#form_rptActivityLog');
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);

    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        rules: {
            txtShiftDate: {
                required: true
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit              
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },

        errorPlacement: function (error, element) { // render error placement for each input type
            var icon = $(element).parent('.input-icon').children('i');
            icon.removeClass('fa-check').addClass("fa-warning");  
            icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group   
        },

        unhighlight: function (element) { // revert the change done by hightlight

        },

        success: function (label, element) {
            var icon = $(element).parent('.input-icon').children('i');
            //$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            //icon.removeClass("fa-warning").addClass("fa-check");
            $(element).closest('.form-group').removeClass('has-error')          // remove check mark for success
            icon.removeClass("fa-warning")
        },

        submitHandler: function (form) {
            success.show();
            error.hide();
            form.submit(); // submit the form
        }
    });


}


return {

    //main function to initiate the module
    init: function () {

        console.log('Activity Log Validation');
        rptActivityLogValidation();
    }

};

}();

我得到的错误是： JavaScript 运行时错误：对象不支持属性或方法 'submit'

非常感谢任何帮助。

Answer 1

var rptActivityLogValidation = function() {
    var form = $('#form_rptActivityLog')[0];

    form.validate({ 
        // .... VALIDATE FIELDS HERE ..... //

        submitHandler: function (form) {
            form.submit(); // submit the form
        }
     });
}

您可以试试这个 -- 使 form 变量成为特定形式 [0]。由于您将其传递到 submitHandler 中，因此您不需要 [0] 在其中。这将确保您真正对表格进行标记。

虽然我们需要看看你是怎么调用submitHandler的。您实际上是将表格传递给它吗？

Answer 2

您想要运行 after 验证但 before 表单提交的任何功能 在你的 submitHandler 的 里面；它与您的 success.show() 等没有什么不同

submitHandler: function (form) {
    // form is valid and ready to submit
    // do stuff here
    success.show();
    error.hide();
    form.submit(); // submit the form
}

运行 JQuery-验证后的 JS 函数

Run JS Function After JQuery-Validation

javascript

jquery

jquery-validate