jQuery validation not working separately on each class. It is working on all element at the same time

user_9145651 0
Viewed 56

I have this code which was working on a single class perfectly. I changed this to each class because I added multiple-element with the same class and want to set the same validation error on both fields.

html

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <label>Serial number start with 1 or 2</label>
    <span>
        <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber"
            placeholder="00-000000-00">
    </span>
    <span class="errmsgserienum"></span>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <label>Serial number start with 1 or 2</label>
    <span>
        <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber"
            placeholder="00-000000-00">
    </span>
    <span class="errmsgserienum"></span>
</div>

JS

jQuery(function ($) {
    $('.serialnumber').keyup(function (ev) {
        $('.serialnumber').each(function (ev) {
            var x = $(this).val();
            // Allow Backspace and Delete
            if (ev.keyCode == 8 || ev.keyCode == 46) {
                return true;
            }
            if (!x.match(/^1|2+/)) {
                $(".errmsgserienum").html("Serial number should start with 1 or 2");
                $(this).val(x.substr(0, -1));
            } else if (x.match(/^1|2+/) && x.length == 12) {
                $(".errmsgserienum").html("");
            }
        });
    });
});

After adding each class it is working on all elements at the same time. How can this be work on each class element separately?

html jquery javascript
3 Answers

You don't need to use each loop here . Simply , use $(this).closest(".outer").find(".errmsgserienum").. to add error message next to input box where user has typed.

Demo Code :

jQuery(function($) {
  $('.serialnumber').keyup(function(ev) {
    var x = $(this).val();
    // Allow Backspace and Delete
    if (ev.keyCode == 8 || ev.keyCode == 46) {
      return true;
    }
    if (!x.match(/^1|2+/)) {
 //get closest outer div and then find span tag to show error 
 $(this).closest(".outer").find(".errmsgserienum").html("Serial number should start with 1 or 2");
      $(this).val(x.substr(0, -1));
    } else if (x.match(/^1|2+/) && x.length == 12) {
      $(this).closest(".outer").find(".errmsgserienum").html("");
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--aded outer class-->
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 outer">
  <label>Serial number start with 1 or 2</label>
  <span>
  <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00">
  </span>
  <span class="errmsgserienum"></span>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 outer">
  <label>Serial number start with 1 or 2</label>
  <span>
  <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00">
  </span>
  <span class="errmsgserienum"></span>
</div>

user_106064000

that's because you are performing the changes on all the elements with the class=errmsgserienum, instead, you need to get only one element and the way to do that is with using $(this) first you will get the closet parent div with div=$("span").closest("div"); then again get the closet span with a class of errmsgserienum therightspan=div.closest('.errmsgserienum'); this way you will always get the right and the only span

user_136126280

If you have binded the keyup event then why are you iterating over all other elements, you just need to remove the each looping also you don't need to use the class for showing errors as it will display error message for all of the elements with that class. Here is the modified code snippet you can use. It will server your prupose:

jQuery(function ($) {
    $('.serialnumber').keyup(function (ev) {
            var x = $(this).val();
            // Allow Backspace and Delete
            if (ev.keyCode == 8 || ev.keyCode == 46) {
                return true;
            }
            if (!x.match(/^1|2+/)) {
                $(this).parents(".wrapper").find(".errmsgserienum").html("Serial number should start with 1 or 2");
                $(this).val(x.substr(0, -1));
            } else if (x.match(/^1|2+/) && x.length == 12) {
                $(this).parents(".wrapper").find(".errmsgserienum").html("");
            }
    });
});
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 wrapper">
  <label>Serial number start with 1 or 2</label>
  <span>
  <input type="text" name="serienummer" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00">
  </span>
  <span class="errmsgserienum"></span>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 wrapper">
  <label>Serial number start with 1 or 2</label>
  <span>
  <input type="text" name="serienummer1" value="" maxlength="12" minlength="12" class="serialnumber" placeholder="00-000000-00">
  </span>
  <span class="errmsgserienum"></span>
</div>

user_52438550
Related