即使必填字段值不正确或验证失败，为什么要提交此表单？

Question

我正在应用Javascript验证，当表单验证失败时为什么

提交。我在这里使用以下代码。

var FormValidation = function () {
    var isbnForm = function() {
            // for more info visit the official plugin documentation: 
                // http://docs.jquery.com/Plugins/Validation


                var form1 = $('#isbnForm');
                var error1 = $('.alert-danger', form1);
                var success1 = $('.alert-success', form1);

                form1.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
                    messages: {
                        select_multi: {
                            maxlength: jQuery.validator.format("Max {0} items allowed for selection"),
                            minlength: jQuery.validator.format("At least {0} items must be selected")
                        }
                    },
                    rules: {
                        isbn: {
                            required: function(){

                                    var isbn = $("#isbn").val();
                                    if(isbn){

                                        var resultData10 = isValidIsbn10 (isbn);
                                        if(resultData10 != 1){

                                             $(".errorData").show();
                                             $(".errorData").html("<p style='color:#A94442;'>ISBN number is not valid</p>");
                                             return true;
                                         }
                                         else{
                                            $(".errorData").hide();
                                            return false;
                                        }
                                     }
                                     else{
                                           $(".errorData").hide();
                                            return true;
                                     }

                                    function isValidIsbn10 (isbn) {

                                            isbn = isbn.replace(/[^\dX]/gi, '');

                                            if(isbn.length != 10){
                                                return false;
                                            }
                                            var chars = isbn.split('');
                                            if(chars[9].toUpperCase() == 'X'){
                                                chars[9] = 10;
                                            }
                                            var sum = 0;
                                            for (var i = 0; i < chars.length; i++) {

                                                sum += ((10-i) * parseInt(chars[i]));
                                            };
                                            return (0 === (sum % 11)) ? 1 : false;
                                        }
                            }

                        },
                         name: {

                            required: true
                        },


                    },

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

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

                    unhighlight: function (element) { // revert the change done by hightlight
                        $(element)
                            .closest('.form-group').removeClass('has-error'); // set error class to the control group
                    },

                    success: function (label) {
                        label
                            .closest('.form-group').removeClass('has-error'); // set success class to the control group
                    },

                    submitHandler: function (event,form) {
                        success1.show();
                        error1.hide();
                        form.submit();
                    }
                });


        }

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

                isbnForm();

            }

        };

    }();

当我输入错误的值到ISBN输入类型时，将显示错误消息但是在提交该表单后。我希望如果值错误则不应提交表单。

Answer 1

您的isbn: required规则仅确定是否需要isbn。如果您输入的isbn无效，isValidIsbn10()将返回false，您的required规则将返回false。所以这意味着不需要isbn，就是这样。这并不能阻止提交表格。

您想要的是仅在isbn有效时验证的规则。你需要custom validation method才能做到这一点。