javascriptを使用した入力フィールドの検証

Question

入力したフィールドの値が有効かどうか、ページを送信する前にonchangeを使用しているかどうかを確認したいと考えています。私は以下のように書いています。それはうまく検証されます。しかし、入力項目にエラーがない場合、 'NEXT'ボタンをどのように起動するのですか？

<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> 

インサイドあなたはそれを見えるようにしたい、あなたは$('#next').show()を呼び出すことができる "活性化" によって場合

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 = ""; 
    } 
} 

Answer 1

をvalidate_js.js。

しかし、jQueryを使用してクリックをシミュレートする場合は、のように$('#next').click()または$('#next').trigger('click')と呼ぶことができます。また、フォームにすべてを入れ、入力が検証をパスするときにプログラムでフォームを送信することもできます。

Answer 2

フィールドごとにchangeイベントをトリガーする可能性がありますので、それぞれのフィールドを再度検証します。

例えば、

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