驗證輸入字段使用javascript

我想檢查，如果輸入字段的值是有效的或不使用onchange提交頁面之前。我寫下如下。它驗證得很好。但是如果在輸入條目沒有錯誤時如何激活'NEXT'按鈕。驗證輸入字段使用javascript

<div><input type="text" name="your_name" id="your_name" onchange = "validate_Name(this,1,4)" /> 
    <span id="your_name-error" class="signup-error">*</span> 
</div> 
<div><input type="text" name="your_addr" id="your_addr" onchange = "validate_Name(this,1,4)" /> 
    <span id="your_addr-error" class="signup-error">*</span> 
</div> 
<input class="btnAction" type="button" name="next" id="next" value="Next" style="display:none;"> 

<script type="text/javascript" src="../inc/validate_js.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#next").click(function() { 
      var output = validate(); //return true if no error 
      if (output) { 
       var current = $(".active"); //activating NEXT button 

      } else { 
       alert("Please correct the fields."); 
      } 
     }); 
    } 

    function validate() { 
     //What should write here?I want to analyse the validate_js.js value here. 
    } 
</script>

內通過「激活」你想使其可見validate_js.js

function validate_Name(inputVal, minLeng, maxLeng) { 

    if (inputVal.value.length > maxLeng) { 
     inputVal.style.background = "red"; 
     inputVal.nextElementSibling.innerHTML = "<br>Max Characters:" + maxLeng; 
    } else if (!(tBox.value.match(letters))) { 
     inputVal.style.background = "red"; 
     inputVal.nextElementSibling.innerHTML = "<br>Use only a-zA-Z0-9_ "; 
    } else { 
     inputVal.style.background = "white"; 
     inputVal.nextElementSibling.innerHTML = ""; 
    } 
}

來源

2017-01-16 user2431727

如果，您可以撥打$('#next').show()。

但是，如果你想模擬點擊它，使用jQuery，你可以簡單地調用$('#next').click()或$('#next').trigger('click')如here所述。此外，您可能希望將所有內容都放入表單中，並在輸入通過驗證時以編程方式提交表單。

來源

2017-01-16 10:45:10 motanelu

這不是我doubt.How檢查前有錯誤激活或關閉下一步按鈕 – user2431727

到底是你面對什麼問題？什麼不行？ – motanelu

驗證當onchange和激活下一個按鈕工作正常。我也想點擊Next按鈕檢查驗證。也就是說，如果有任何無效字段時如何停止激活Next按鈕？ – user2431727

您可能會觸發每個字段的change事件，以便再次驗證每個字段。

例如。

function validate() { 
    $("#your_name").trigger('change'); 
    $("#your_addr").trigger('change'); 
}

來源

2017-01-16 11:14:56 CUGreen

驗證輸入字段使用javascript

回答

相關問題