如果jqBootstrapValidation输入无效('hasErrors')，禁用提交按钮

Question

我有以下几点：

<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，如果文本输入字段包含无效的主机名格式，我将尝试禁用submit按钮。

但似乎不起作用。有人能指出我做错了什么吗？

UPDATE：找到了禁用提交函数(而不是按钮)的方法：

查看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回购之后，这个插件似乎已经近一年没有更新了。我建议切换到jQuery验证插件。

若要在引导带中使用jQuery验证插件，只需在代码之前添加此插件以修复格式化：

// 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()进行测试。