jQuery对所有输入文本的模糊进行验证

Question

我尝试在用户离开文本表单时使用表单验证。 这段代码实际上是按照我想要的运行，但问题是我无法验证我输入的特定表单。当我离开表单名称时，表单编号在我有机会输入之前也显示错误。

当用户离开表单文本时，如何将每个输入上的错误消息拆分到全局函数中？

$(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'>

Answer 1

您可以使用 HTML 本身中span错误消息，然后根据input元素id选择span元素，从而简化代码以实现隐藏显示。像这样：

$(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>

Answer 2

我建议让错误消息出现在 HTML 中，但不显示，然后当blur事件发生时，您检查该字段是否为空，如果是，然后获取带有错误消息的元素并显示它。

我创建了一个函数，当发生模糊时，每个input[type=text]都会调用该函数，该函数将检查/验证字段

$(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>