Javascript 表单验证在Metronic中无法正常工作_Javascript_Jquery_Validation_Metronic

Javascript 表单验证在Metronic中无法正常工作

javascript jquery validation

Javascript 表单验证在Metronic中无法正常工作,javascript,jquery,validation,metronic,Javascript,Jquery,Validation,Metronic,我在应用程序中使用metronic框架。此metronic表单允许空格与（勾号）标记一起有效，即使不输入任何字符在用户输入之前，值字段应无效下面是如何工作的示例链接请转到“使用图标验证”表单，在nae字段中键入3个或更多空格，然后您可以看到无效的勾号图标您可以建议如何解决此问题。您可以在文件\assets\pages\scripts\form validation.js中找到此验证首先，添加一个额外的方法noSpace来验证空白。然后，您可以修改处理#form_sample_2验证的

我在应用程序中使用metronic框架。此metronic表单允许空格与（勾号）标记一起有效，即使不输入任何字符

在用户输入之前，值字段应无效

下面是如何工作的示例链接

请转到“使用图标验证”表单，在nae字段中键入3个或更多空格，然后您可以看到无效的勾号图标

您可以建议如何解决此问题。

您可以在文件

\assets\pages\scripts\form validation.js

中找到此验证

首先，添加一个额外的方法

noSpace

来验证空白。然后，您可以修改处理

#form_sample_2

验证的方法，即

handleValidation2

。您只需在

规则

中为

名称

整个代码如下所示：

// validation using icons

// Additional method to validate whitespaces
jQuery.validator.addMethod("noSpace", function(value, element) { 
  return value == '' || value.trim().length != 0; 
}, "No space please and don't leave it empty");

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

    var form2 = $('#form_sample_2');
    var error2 = $('.alert-danger', form2);
    var success2 = $('.alert-success', form2);

    form2.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: {
            name: {
                minlength: 2,
                required: true,
                noSpace: true
            },
            email: {
                required: true,
                email: true
            },
            email: {
                required: true,
                email: true
            },
            url: {
                required: true,
                url: true
            },
            number: {
                required: true,
                number: true
            },
            digits: {
                required: true,
                digits: true
            },
            creditcard: {
                required: true,
                creditcard: true
            },
        },

        invalidHandler: function (event, validator) { //display error alert on form submit              
            success2.hide();
            error2.show();
            App.scrollTo(error2, -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");
        },

        submitHandler: function (form) {
            success2.show();
            error2.hide();
            form[0].submit(); // submit the form
        }
    });
}

完成后，缩小

表单验证.js

文件并替换现有的

表单验证.min.js

文件。