禁用提交按鈕，如果jqBootstrapValidation輸入是無效的（ 'hasErrors'）

我有以下幾點：禁用提交按鈕，如果jqBootstrapValidation輸入是無效的（ 'hasErrors'）

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，如果文本輸入字段包含無效的h，我試圖禁用提交按鈕ostname格式。

但它似乎沒有工作。任何人都可以指出爲什麼或/和我做錯了什麼？

UPDATE：找到一種方法來禁用提交功能（不是按鈕）：

望着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'); 
     } 
    } 
);

但它仍然沒有真正禁用提交按鈕本身。

來源

2014-03-03 Elijah Paul

什麼是您的正則表達式測試？ – Tomanow

@Tomanow正則表達式正在測試FQDN，包括通配符*。格式化的。儘管如此，我不認爲這是100％完全證明。 –

我創建了一個包括所有必需的JS/CSS等的小提琴，但甚至無法獲得jqBootstrapValidation提供的與Bootstrap 3一起使用的簡單示例。看到github回購後，看起來該插件尚未更新在近一年內。我建議切換到jQuery Validation Plugin。

要與引導使用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()結合使用。

來源

2014-03-03 22:03:07 Tomanow

謝謝你。我會看看這個插件，並嘗試你的解決方案。 –

禁用提交按鈕，如果jqBootstrapValidation輸入是無效的（ 'hasErrors'）

回答

相關問題