Javascript validation using same class every where

Question

I have same input class,type in several pages like the following :

<input type="text" name="studentID" id="studentID" class="form-control student-id"/>

what I want using the same class name student-id , it will validate student id using the following js :

function validateStudentId(){
    var studentId= document.getElementsByClassName('student-id');
    if (studentId.length > 0) {
        var id = studentId[0].value;
        console.log('lengthe'+id.length);
        if(id.length > 7){
            alert('Please enter valid student id .');
            $('.student-id').val("");
            return;
        }
        if(isNaN(id)){
            alert('Entered input is not a number .');
            $('.student-id').val("");
            return;
        }

    }
}

To do this job I've already done the following :

<input type="text" class="form-control student-id" onchange="validateStudentId()" name="studentid" size="10" maxlength="7" />

An onchange function added. Is there any better way to do this.

coz I have to do this onchange function call every time. So what I want is to give only class name and it will automatically validate the field using the class name.

Suggest me any better idea, Just dont want to write onchange function every time ?? Thanks

`coz I have to do this onchange function call every time` What exactly is troubling you about this? Do you not want to add the `onchange` attribute to the markup, or what? — CertainPerformance, May 05 '19 at 07:31
yes. maybe its markup. I dont know. I just dont want to write onchange function every time. Just want to give class name 'student-id' and it will validate automatically. @CertainPerformance — Insanity Geek, May 05 '19 at 07:33
So, can you just attach the listener to the `student-id` with Javascript? — CertainPerformance, May 05 '19 at 07:37
please read again. I have 50+ pages for this same validation . And Will add new pages in future. So I dont want to write "onchange" function every time.. — Insanity Geek, May 05 '19 at 07:38
The dupe "show/hide", you "validate" instead. The logic used is the same though and will allow you to dynamically add the _onchange_ handler instead of inline. — Asons, May 05 '19 at 07:44

Constantin Groß · Answer 1 · 2019-05-05T08:30:01.900

You can use document.querySelectorAll('input.student-id') to select all inputs with that class and then .forEach() on the node list to iterate over them and call the validation function on each of them.

I also replaced the jQuery calls with plain JavaScript because it's really simple for this use case. I switched the check for a numeric value to come before the length check as well, because that seems more logical to me.

function validateStudentId(inputEl) {
  var studentId = inputEl;
  var id = studentId.value;
  console.log('length: ' + id.length);
  if (isNaN(id)) {
    alert('Entered input is not a number .');
    inputEl.value = "";
    return;
  }
  if (id.length > 7) {
    alert('Please enter valid student id .');
    inputEl.value = "";
    return;
  }
}


document.querySelectorAll('input.student-id').forEach(function(inputEl) {
  inputEl.addEventListener('change', function() {
    validateStudentId(this);
  });
});

<input type="text" name="studentID" id="studentID" class="form-control student-id" value="abc" />
<input type="text" name="studentID2" id="studentID2" class="form-control student-id" value="1234567890" />
<input type="text" name="studentID3" id="studentID3" class="form-control student-id" value="123456" />

i dont want to click button. It should work in type "on change". — Insanity Geek, May 05 '19 at 07:53
Still, this snippet should have given you the right idea. Otherwise, this has an unpleasant "code that for me!" ring to it. Just switch the click event listener on the button with a change event listener on each input inside the iteration. Nevertheless, I updated the snippet. — Constantin Groß, May 05 '19 at 08:31

Javascript validation using same class every where

1 Answers1