CODEWITHSUNDEEP
javascriptjqueryvalidation
Widdesto Yudistiro
Widdesto Yudistiro

Reputation: 63

jquery validation on blur on all input text

I trying to use form validation when a user leaves the text form. this code is actually run as I wanted but, the problem is I cannot validate specific form I input. when I leave form name, the form number also showing an error before I have a chance to input on it.

How can I split the error message on every input into the global function when the user leaves the form text?

$(document).ready(function(){
  $('input[type=text]').on('blur', function(){
    $(this).each(function(){
      nama ($('#nama').val());
      no($('#nomor').val());
    });
  });
  
  
  function nama(myname){
    if(!myname){
    $('<span>name cannot be empty</span>').insertAfter('#nama'); 
    }
  }
  
  
    function no(mynomor){
    if(!mynomor){
      $('<span>number cannot be empty</span>').insertAfter('#nomor');  
    }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>name</p>
<input type="text" id='nama'>
<br>
<p>number</p>
<input type="text" id='nomor'>

Upvotes: 0

Views: 4843

Answers (2)

Calvin Nunes
Calvin Nunes

Reputation: 6516

I would suggest to let the error message in the HTML, but not being displayed, then when the blur events occur, you check to see if the field is empty, if it is, then get the element with the error message and show it.

I created a function that will be called by every input[type=text] when blur occurs, that function will check/validate the field

$(document).ready(function(){
  $('input[type=text]').on('blur', function(){
    validateField(this)
  });
  
  function validateField(field){
    let value = field.value;
    if (value.trim().length < 1 || value === null){
      $(field).siblings(".invalid-msg").removeClass("not-error").addClass("error-show")
    }else{
      $(field).siblings(".invalid-msg").removeClass("error-show").addClass("not-error")
    }
  }
  
});
.error-show{
  display: inline-block;
  color: red;
}

.not-error{
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>name</p>
  <input type="text" id='nama'> <span class="not-error invalid-msg">Name can't be empty</span>
</div>
<br>
<div>
  <p>number</p>
  <input type="text" id='nomor'> <span class="not-error invalid-msg">Number can't be empty</span>
</div>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can simplify your code to achieve that hide show by using the error message span in the HTML itself and then selecting the span element based on the input element id. Something like this:

$(document).ready(function() {
  $('input[type=text]').on('blur', function(e) {
    var id = this.id;
    if (e.target.value) {
      $('#' + id + 'span').hide();

    } else {
      $('#' + id + 'span').show();

    }
  });
});
.error-span {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>name</p>
<input type="text" id='nama'>
<span id='namaspan' class='error-span'>name cannot be empty</span>
<br>
<p>number</p>
<input type="text" id='nomor'>
<span id='nomorspan' class='error-span'>number cannot be empty</span>

Upvotes: 2

Related Questions