表格验证在Metronic

时间:2016-07-25 12:24:14

标签: javascript jquery validation metronic

我在应用程序中使用metronic框架。这种metronic形式允许白色空格与(tick)标记一致,即使不输入任何字符。

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

此处示例链接如何工作 http://keenthemes.com/preview/metronic/theme/admin_4/form_validation.html

请转到"使用图标验证"在nae字段中输入并输入3个或更多空格,然后您可以看到有效的刻度线图标,这是真的无效。

您能否建议如何解决此问题。

1 个答案:

答案 0 :(得分:0)

您可以在文件\assets\pages\scripts\form-validation.js中找到此验证。

首先,添加其他方法noSpace来验证空格。然后,您可以修改处理#form_sample_2(即handleValidation2)的验证方法。您只需要在noSpace: true的{​​{1}}中输入rules

完整代码如下:

name

完成此操作后,请缩小// 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 } }); } 文件并替换现有的form-validation.js文件。