как добавить класс ошибки рядом с текстовым полем в jQuery

Question

Я просто хочу спросить, как отображать сообщение об ошибке рядом с текстовым полем, если пользователь ничего не вводит и нажимает submit, необходимый атрибут должен вызывать нужную ошибку рядом с текстовым полем и не ниже его

Answer 1

Вы можете проверить на пустые input с и добавить пядь об ошибке рядом с ним:

$("input").filter(function() { 
    return $(this).val().trim().length == 0; 
}).after('<span class="text-danger error">You need to fill this!</span>'); 

Snippet

$(function() { 
 
    $("input").filter(function() { 
 
    return $(this).val().trim().length == 0; 
 
    }).after('<span class="text-danger error">You need to fill this!</span>'); 
 
});

* {font-size: 10pt; font-family: Segoe UI;} 
 
.error {background: #f99; border: 1px solid #f00; padding: 3px; color: #fff; font-size: 85%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input value="Filled" /><br /> 
 
<input placeholder="Not filled" /><br /> 
 
<input value="Filled" /><br /> 
 
<input value="Filled" /><br /> 
 
<input placeholder="Not filled" /><br /> 
 
<input value="Filled" /><br />