如何为多个输入字段实现单一验证方法？

Question

I am implementing multiple input fields in a form element, So inside form may be one input field and more than one input field. So I want to implement one method for validation. For a phone number, email, age, date, etc. So in future may be formed has 15 input fields. So in that case on method should handle all input fields.

Below is the sample code:

<form onsubmit="return false">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
     <div>
        <label for="">Middle Name</label>
        <input type="text" name="mname" id="mname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</form>
<script>
    var data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data); //return object
    }
</script>

DEMO https://jsfiddle.net/varunPes/2fdoxanu/5/

Is it possible to handle validation through one function? If anyone has any idea, Please share, Thank you in advance.

Answer 1

The term "validation" is a bit vague, You could use the basic html form validation api [ https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation ] and set the necessary validations in the html by passing attributes

Another way would be to create a nested handleInput function like below, and use switch case to validate.

<form onsubmit="return false">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput('text')(this)>
    </div>
     <div>
        <label for="">Middle Name</label>
        <input type="text" name="mname" id="mname" onkeyup=handleInput('text')(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput('number')(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput('email')(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput('phone')(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</form>
<script>
    var data={ };
    const handleInput = (type) => (e) => { //using arrow functions and function expression for easier readability
        switch(type){
           case "text" : //do logic here
               break;
           case "number" : //logic here
               break;
           case "email" : ///..etc
               break;
         }
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data); //return object
    }
</script>

You could very well instead just use the switch(e.target.id) and apply logic with that inside switch case if you prefer so, but you should modify the cases with each new id and input