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运行时错误：对象不支持属性或方法＆＃39;提交＆＃39;

非常感谢任何帮助。

Answer 1

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

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

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

您可以尝试这一点 - 将form var设为特定格式[0]。由于您将其传递给submitHandler，因此您不需要[0]。这样可以确保您真正对表单进行了调整。

虽然我们需要看看你如何调用submitHandler。你真的将表格传递给它吗？

Answer 2

您希望在验证后运行但在表单提交之前运行的任何函数将在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-Validation之后运行JS函数

2 个答案: