客戶端JavaScript字段驗證

我有一個特殊的場景，就客戶端驗證而言，我需要一些幫助。客戶端JavaScript字段驗證

我有一些需要的輸入字段（不需要HTML），但它們使用名爲「requiredInput」的類標識爲需要，並在用戶單擊提交按鈕時在服務器端進行評估。

但是，我想驗證輸入字段的客戶端，當用戶從該字段移開並禁用提交，直到所有需要的字段填寫。

我怎麼去這個場景爲了完全處理這個客戶端而不是等待服務器端提交來執行驗證？

<input type="text" name="lastName" id="lastName" class="requiredInput" tabindex="3">

注：我不想執行的有效性提出，我想驗證的onblur和禁用提交直到所有的必填字段填寫

來源

2016-11-23 Neophile

你好@DurgpalSingh，我不想執行上提交驗證，而我想要做的是的onblur一個輸入字段。 – Neophile

html5有一個'required'屬性，工作得很好。否則就是這樣的：https：//jqueryvalidation.org/ – axlj

你有一大堆的JS驗證包，你可以找到accros互聯網。

現在我認爲最好的之一是ParsleyJS。你可以使用少量的內置（和一些額外的）驗證器，在客戶端完美地工作。 Ypou可以自己設計一次。如果您不想將整個表單發送到服務器，那麼也有可能驗證遠程遠程，這也很好。

來源

2016-11-23 13:11:06

另一個是jQuery Valitation插件，包含在一些Bootstrap模板中。它非常易於使用。它基於輸入的id進行驗證。它有一些內建方法，在StackOverflow中有一個標記，並允許您創建自定義方法。 –

你好@菲利普：ParsleyJS看起來很有希望，但是，它不給我驗證onblur字段的選項嗎？我目前已經具有驗證提交功能。 – Neophile

嗯，是的，我給你驗證模糊 –

如果您wan't一個純粹的JS解決方案，並且希望的究竟是有效的完全控制，你可能想要做這樣的事情：

創建validateInput()函數得到所有的輸入字段，檢查他們是否有內容（以及您可能想要執行的任何其他檢查），並在一切如預期時繼續啓用提交按鈕。將該函數附加到每個輸入字段的onblur事件。

function validateInput(){ 
    let validInput = true; 
    let field1Content = document.getElementById('field1').value; 
    let field2Content = document.getElementById('field2').value; 
    if(field1Content.length === 0 || field2Content === 0) 
     validInput = false; 

    if(validInput) 
    //enable submit button 
}

來源

2016-11-23 13:12:40 ThatBrianDude

你可以伊斯利做到這一點，如果你有jQuery的，請嘗試以下

<input type="text" name="lastName" id="txtbox1" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox2" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox3" class="requiredInput clsValidate" tabindex="3"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
    ValidateInput(); 
}); 

$(document).on('change', 'input.clsValidate[type=text]', function() { 
    ValidateInput(); 
}); 

function ValidateInput() { 
    var cnt = 0; 
    $('input.clsValidate[type=text]').each(function (i, obj) { 
     if ($(this).val().trim().length <= 0) { 
      cnt++; 
     } 
     if (cnt > 0) { 
      $('#btnsubmit').attr('disabled', 'disabled') 
     } else { 
      $('#btnsubmit').removeAttr('disabled'); 
     } 
    }); 
} 
</script>

來源

2016-11-23 13:34:22

你好，這很好，但這只是啓用和禁用提交按鈕。我能不能只觸發域上的驗證，因爲一旦它進行服務器端往返，它確實會顯示基於該類的錯誤。 – Neophile

客戶端JavaScript字段驗證

回答

相關問題