Get auto update in id without clicking mouse point any ware - html

Question

I'm trying to get ajax value get auto update in id without clicking mouse point any ware, now I'm able to get value vile pressing mouse point any ware it get update
input fled
<div class="form-control-wrap">
<input type="text" class="form-control form-control-outlined form-control-outlined" id="email" name="email" >
<label class="form-label-outlined" for="email">email</label>
<span id="error_email"></span>
</div>
My ajax code
<script>
$(document).ready(function(){
$('#email').blur(function(){
var error_email = '';
var email = $('#email').val();
var _token = $('input[name="_token"]').val();
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(email))
{
$('#error_email').html('<label class="text-danger">Invalid Email</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
else
{
$.ajax({
url:"{{ url('https://test.com/email_available/check') }}",
method:"POST",
data:{email:email, _token:_token},
success:function(result)
{
if(result == 'unique')
{
$('#error_email').html('<label class="text-success">Email Available</label>');
$('#email').removeClass('has-error');
$('#register').attr('disabled', false);
}
else
{
$('#error_email').html('<label class="text-danger">Email not Available</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
}
})
}
});
});
</script>

Answer 1

To get the value to auto-update without clicking anywhere, you can use the keyup event instead of the blur event. The keyup event will fire every time a key is pressed and released in the input field, so the validation will happen in real-time.
Here is an updated version of your code using the keyup event:
$(document).ready(function(){
$('#email').keyup(function(){
var error_email = '';
var email = $('#email').val();
var _token = $('input[name="_token"]').val();
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(email))
{
$('#error_email').html('<label class="text-danger">Invalid Email</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
else
{
$.ajax({
url:"{{ url('https://test.com/email_available/check') }}",
method:"POST",
data:{email:email, _token:_token},
success:function(result)
{
if(result == 'unique')
{
$('#error_email').html('<label class="text-success">Email Available</label>');
$('#email').removeClass('has-error');
$('#register').attr('disabled', false);
}
else
{
$('#error_email').html('<label class="text-danger">Email not Available</label>');
$('#email').addClass('has-error');
$('#register').attr('disabled', 'disabled');
}
}
})
}
});
});
Note that with this approach, the validation will happen every time a key is pressed, which can be resource-intensive if you have a lot of input fields or if the validation involves a lot of processing. In that case, you might want to consider adding a delay using setTimeout or using a different approach, such as validating the input field when the form is submitted instead of in real-time.