Question

我有以下内容：

HTML

<form class="form-horizontal" role="form" id="Validation" method="post" action="form.php">

    <input class="form-control" type="text" name="hn" id="hostname" data-validation-regex-message="Please enter a valid hostname" data-validation-regex-regex="^((\*\.([a-zA-Z0-9]+-)*[a-zA-Z0-9]+\.)|(([a-zA-Z0-9]+-)*[a-zA-Z0-9]+\.)+)[A-Za-z]([A-Za-z0-9-]*[A-Za-z0-9])?$" required>

    <input id="submit" class="btn btn-info" type="submit" name="submit" value="Submit" />
    <input class="btn btn-default" type="reset" value="Clear" />

</form>

JS / Jquery的

 $(document).ready(function(){
    if ($('input[type=text]').jqBootstrapValidation('hasErrors')) {
            $('.btn').attr('disabled', true);
        }
        else
        $('.btn').attr('disabled', false);
});

使用jqBootstrapValidation，如果文本输入字段包含无效的主机名格式，我正在尝试禁用提交按钮。

但它似乎不起作用。任何人都可以指出为什么或/和我做错了什么？

更新：找到一种方法来禁用提交功能（而不是按钮）：

查看SubmitError回调（http://reactiveraven.github.io/jqBootstrapValidation/#configuration_options_submiterror）。

如果输入字段无效，则会阻止提交表单：

$('#hostname').jqBootstrapValidation(
    {
        submitFail: function ($form, errors) { 
            $('input[type=submit]').attr('disabled','disabled');
        }, 
        submitSuccess: function ($form, errors) { 
            $('input[type=submit]').removeAttr('disabled');
        }
    }
);

但它实际上仍然没有禁用提交按钮本身。

Answer 1

我创建了一个小提琴，包括所有必需的JS / CSS等，但是甚至无法获得jqBootstrapValidation提供的简单示例以使用Bootstrap 3.看到github repo之后，看来该插件尚未更新将近一年。我建议切换到jQuery Validation Plugin。

要将jQuery Validation Plugin与Bootstrap一起使用，只需在代码之前添加它以修复格式：

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

然后，您可以通过.valid()方法检查表单的有效性。您可能希望在用户键入时进行测试，在这种情况下，请将jQuery的.keyup()方法与.valid()结合使用。

如果jqBootstrapValidation输入无效，则禁用提交按钮（'hasErrors'）

1 个答案: