Question

我正在研究纯香草javascript表单验证没有第三方插件。当我开始编码时，只需要验证4个字段的40多行就可以使用javascript进行短而精细的几行代码验证。在文本字段的onfocus中，我想隐藏错误类并在我键入值时恢复正常，它必须以彩色显示黑色文本。

实际上目前我在一个表格页面上工作它有超过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;
 }

以下是Fiddle Link

请帮帮我。

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

Update JSFIDDLE

自定义表单验证香草javascript

1 个答案: