自定義表單驗證香草JavaScript

Question

我正在使用純香草javascript表單驗證，沒有第三方插件。 當我開始編碼時，僅要驗證4個字段就要花費40多行，這是可能的，我們可以使用javascript進行簡短的代碼驗證。 在文本字段的焦點上，當我鍵入值時，我想隱藏錯誤類並恢復正常，它必須以彩色顯示黑色文本。

實際上，當前我正在一個表單頁面上工作，如果我開始編碼以進行驗證，那么它將有20多個字段，這行太多了。 :)

目前我正在使用以下

HTML代碼

<input type="text" id="usr_name" name="usr_name" placeholder="User Name"/>
<input type="text" id="fst_name" name="fst_name" placeholder="First Name"/>
<input type="text" id="lst_name" name="lst_name" placeholder="Last Name"/>
<input type="text" id="mdl_name" name="mdl_name" placeholder="Middle Name"/>
<button onclick="validate()">Submit</button>

JavaScript代碼

function validate(){
    //alert("check");
    var uname = document.getElementById("usr_name");
    var fname = document.getElementById("fst_name");
    var lname = document.getElementById("lst_name");

    var mname = document.getElementById("mdl_name");

    if(uname.value.length <= 0){
        uname.placeholder = "kindly enter Uname";
        uname.classList.add("err");
    }
}

這是CSS。

.err{
    border:1px solid red;
    color:red;
}
.onfcs{
    border:0px solid red;
    color:black;
 }

這是小提琴鏈接

請幫我。

Answer 1

的HTML

<input type="text" id="usr_name" class="validate" name="usr_name" placeholder="User Name"/>
<input type="text" id="fst_name" class="validate" name="fst_name" placeholder="First Name"/>
<input type="text" id="lst_name" class="validate" name="lst_name" placeholder="Last Name"/>
<input type="text" id="mdl_name" class="validate" name="mdl_name" placeholder="Middle Name"/>
<button onclick="validate()">Submit</button>

JS

function validate(){    

  // get all the inputs that have the validate class in it
  // this requires the input to have a class name valled validate
  var validateElements = document.getElementsByClassName("validate");


  // Get all the inputs 
  // This code is required because the output 
  // from 'document.getElementsByClassName' is not fit to the current needs

  // console.log("validateElements",validateElements); 
  // Uncomment the previous line to see the output of the 
  // 'document.getElementsByClassName' function

  var inputs = Array.prototype.filter.call(validateElements,
  function(element){
    return element.nodeName === 'INPUT';
  });

  // Loop through the inputs to be validated

  for(var i=0; i < inputs.length; i ++ ){
    var input = inputs[i];
    if(input.value.length == 0){
        // generic placeholder
        input.placeholder = "kindly enter value";
        // error class
        input.classList.add("err");
        // The following is required if you want the validation to stop
        // once an invalid input is found
        // focus on the input [ optional ]
        //input.focus();
        // break the loop [ optional ]
        //break;
    }
  }    
}

更新JSFIDDLE