Presented below is a piece of code written in HTML and jQuery
HTML
<div id="myForm" class="myForm row">
<div class="form-group row">
<div class="col-lg-12">
<div class="col-md-4">
<label>Name of Friend *</label>
<input type='text' name='name_friend[]' id='name_friend[]' class='form-control name_friend[]' placeholder='Name' required />
</div>
<div class="col-md-4">
<label>Phone Number*</label>
<input type='text' name='nomor_telepon[]' id='nomor_telepon[]' class='form-control nomor_telepon[] telepon phone-email' placeholder='Phone Number' required />
</div>
<div class="col-md-4">
<label>Email</label>
<input type='email' name='email_friend[]' id='email_friend[]' class='form-control email_friend[] phone-email' placeholder='Email' />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<div class="col-md-4">
<label>Name of Friend *</label>
<input type='text' name='name_friend[]' id='name_friend[]' class='form-control name_friend[]' placeholder='Name' required />
</div>
<div class="col-md-4">
<label>Phone Number *</label>
<input type='text' name='nomor_telepon[]' id='nomor_telepon[]' class='form-control nomor_telepon[] telepon phone-email' placeholder='Phone Number' required />
</div>
<div class="col-md-4">
<label>Email</label>
<input type='email' name='email_friend[]' id='email_friend[]' class='form-control email_friend[] phone-email' placeholder='Email' />
</div>
</div>
</div>
</div>
jQuery
$(".phone-email").blur(function(e) {
var param = $(this).val();
var url = "<?php echo base_url('/Campaign/check_data');?>";
$.ajax({
url: url,
type: "POST",
data: {
param: param
}
}).done(function(d) {
var obj = JSON.parse(d);
if (obj.status == "0") {
alert(obj.message);
$("#add-friend").attr('disabled', 'disabled');
$(this).attr('style', 'border: 2px solid #a94442');
} else if (obj.status == "1") {
$("#add-friend").removeAttr('disabled');
}
});
});
The issue with this code is that the element's class does not have a border as intended. The goal is to add a red border to the input when status = 1, but it does not work correctly.
$(this).attr('style', 'border: 2px solid #a94442');