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

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 才能做到这一点。