我有几个输入字段,我试图对其进行验证,例如如果该字段未填写,那么当用户单击“保存”按钮时向用户显示一些警报
因此,我创建了一个函数,在其中检查字段值,当用户单击“保存”时,调用该函数,然后保存数据,当我单击“保存”时,我正在检查验证,然后询问用户 你想保存数据
并保存吗,但我的问题是当我点击保存时,如果任何输入字段
未填写,那么两个警报都会一一显示,我想当某些字段为空时,用户只会收到该警报
代码
function validation() {
if ($('#nameInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter First Name',
onDestroy: function() {
$('#nameInput').focus();
}
});
return false;
}
if ($('#lastNameInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter Last Name',
onDestroy: function() {
$('#lastNameInput').focus();
}
});
return false;
}
if ($('#classInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter class',
onDestroy: function() {
$('#classInput').focus();
}
});
return false;
}
}
$("#save").click(function() {
validation()
$.confirm({
title: '',
content: 'Do you want to Save Data ?',
buttons: {
Yes: function() {
$.confirm({
title: 'Message',
content: 'Data Saved',
buttons: {
ok: function() {}
},
onDestroy: function() {
}
});
},
No: function() {
},
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="nameInput">First Name</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="nameInput" id="nameInput">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="lastNameInput">Last Name</label>
<div class="input-group">
<input type="tel" class="form-control" aria-label="Text input with dropdown button" name="lastNameInput" id="lastNameInput">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="classInput">Class</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="classInput" id="classInput">
</div>
</div>
</div>
<button type="button" class="commonButton" id="save">
Save
</button>
检查我的代码片段以获取工作代码
注意我没有使用必需的 HTML 属性,因为我必须指定哪个字段为空并向该字段发出警报,而不是每个字段的常见警报,而且我还在点击时保存数据事件不在表单提交上,因为我有几个用于不同任务的按钮
最佳答案
这是您的代码:基本上仅在验证成功时才运行确认。
function validation() {
if ($('#nameInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter First Name',
onDestroy: function() {
$('#nameInput').focus();
}
});
return false;
}
if ($('#lastNameInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter Last Name',
onDestroy: function() {
$('#lastNameInput').focus();
}
});
return false;
}
if ($('#classInput').val() == '') {
$.alert({
title: 'Alert!',
content: 'please enter class',
onDestroy: function() {
$('#classInput').focus();
}
});
return false;
}
return true;
}
$("#save").click(function() {
if (validation()) {
$.confirm({
title: '',
content: 'Do you want to Save Data ?',
buttons: {
Yes: function() {
$.confirm({
title: 'Message',
content: 'Data Saved',
buttons: {
ok: function() {}
},
onDestroy: function() {
}
});
},
No: function() {
},
}
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="nameInput">First Name</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="nameInput" id="nameInput">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="lastNameInput">Last Name</label>
<div class="input-group">
<input type="tel" class="form-control" aria-label="Text input with dropdown button" name="lastNameInput" id="lastNameInput">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
<label for="classInput">Class</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" name="classInput" id="classInput">
</div>
</div>
</div>
<button type="button" class="commonButton" id="save">
Save
</button>
关于javascript - 如何一次显示一个警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56767273/