Javascript validation using same class every where [duplicate]

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
– CertainPerformance, Commented May 5, 2019 at 7: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
– Insanity Geek, Commented May 5, 2019 at 7:33
So, can you just attach the listener to the student-id with Javascript? — CertainPerformance
– CertainPerformance, Commented May 5, 2019 at 7: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
– Insanity Geek, Commented May 5, 2019 at 7: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
– Asons, Commented May 5, 2019 at 7:44

Sarah Groß · Accepted Answer · 2019-05-05 08:30:01Z

0

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

edited May 5, 2019 at 8:30

answered May 5, 2019 at 7:40

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Insanity Geek Over a year ago

i dont want to click button. It should work in type "on change".

Sarah Groß Over a year ago

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.

Collectives™ on Stack Overflow

Javascript validation using same class every where [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related