CODEWITHSUNDEEP
javascripthtmljquerycss
dedi wibisono
dedi wibisono

Reputation: 533

How to focus when submitt, validation error checking to the first element jQuery

function validate(){
  var cekLengthError = 0;
  $(".not-empty").each(function(i, obj) {
    if ($(this).children('input').val() == "") {
      $(this).children('input').next().addClass("show");
      $(this).children('input:first').focus();
      cekLengthError = cekLengthError+1;
} else {
    $(this).next().removeClass("show");
  }
});
if(cekLengthError == 0){
    alert("success")
  }
}

When I click validate. Instead it checked the last element first. how to check the first element first? Maybe I was wrong when using this in each function.

Please Check in my fiddle: https://jsfiddle.net/dedi_wibisono17/a7be9zso/50/

Thank you

Upvotes: 0

Views: 549

Answers (2)

Ishita Ray
Ishita Ray

Reputation: 666

$(".add").click(function(){
  $(".test").append(`
    <div class="not-empty"><input type="text" placeholder="name" class="name" /><div class="error">error</div></div>
  `)
})
function validate(){
    var cekLengthError = 0;
 
  $(".not-empty").each(function(i, obj) {
    if ($(this).children('input').val() == "") {
    $(this).children('input').next().addClass("show");
    //$(this).children('input:first').focus();
    
    if($("input.email").val() ==""){
        $(".email").focus();
    }else if ($("input.name").val() ==""){
        $(".name").focus();
    }else if ($("input.city").val() ==""){
        $(".city").focus();
    }else {
    
    }
        cekLengthError = cekLengthError+1;
    }else{
        $(this).next().removeClass("show");
    }
    });
if(cekLengthError == 0){
alert("success")
}
}
.error{
  display:none;
}
.show{
  display:block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lala not-empty">
  <input type="text" class="email" placeholder="email" requird>
  <div class="error">Error</div>
</div>

<div class="test not-empty">
  <input type="text" class="name" placeholder="name">
  <div class="error">Error</div>
</div>
<div class="test not-empty">
  <input type="text" class="city" placeholder="name">
  <div class="error">Error</div>
</div>
<br>
<button class="add">add</button>
<button class="validasi" onclick="validate();">validate</button>

Upvotes: 2

Dipen Shah
Dipen Shah

Reputation: 26075

You are always focusing to an element when iterating over the element list. So if you have 5 elements with an error, you are one by one validating then and focusing on them as well due to which last item in the list is getting focus.

Update your code to fix so that you are focusing only on first invalid field:

function validate() {
  let cekLengthError = 0;
  let foundElemWithError = false;

  $(".not-empty").each(function(i, obj) {
    if ($(this).children('input').val() == "") {
      $(this).children('input').next().addClass("show");

      if (!foundElemWithError) { // only focus on first invalid field
        foundElemWithError = true;
        $(this).children('input:first').focus();
      }
      cekLengthError = cekLengthError + 1;
    } else {
      $(this).next().removeClass("show");
    }
  });
  if (cekLengthError == 0) {
    alert("success")
  }
}

Upvotes: 1

Related Questions