jquery - 如何在 jQuery 中创建验证
问题描述
我正在努力为 jQuery 中的输入创建验证。我有一个 btn 来创建一行。当我单击此 btn 时,您将看到一个弹出页面,其中包括 2 个文本框和 1 个下拉菜单。我想检查这些拖曳文本框是否不为空,然后它会提交。这是我创建的 btn 打开弹出窗口:
<div class="col-lg-12 panel">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> @Resource.Add_new_item
</a>
</div>
这就是弹出窗口中的内容:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
@using (Html.BeginForm("Edit", "ApplicationDetailList", new {page = Model.PageNumber,filter.ListType, filter.PackageName }, FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModalLabel">@Resource.Add_new_item </h5>
</div>
<div class="modal-body">
<div class="form-group">
<label>@Resource.Application_category_tittle *</label>
<input name="id" id="id" class="form-control" style="direction: ltr;"/>
@*@Html.ValidationMessageFor(m => m[0].Id);*@
</div>
<div class="form-group">
<label>@Resource.List_type *</label>
@Html.DropDownList("listType", ApplicationDetailListType.Solr.ToSelectListItems(false, filter.ListType), new { @class = "form-control"})
@*<input name="tags" class="form-control" style="direction: ltr;"/>*@
</div>
<div class="form-group">
<label>@Resource.Package_name *</label>
<input name="packageName" class="form-control" style="direction: ltr;"id="packageName" />
@*@Html.ValidationMessageFor(m=>m[0].PackageName);*@
</div>
<label id="validation">
</label>
<div class="form-group">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-edit-save">@Resource.Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">@Resource.Cancel</button>
</div>
</div>
}
</div>
</div>
这是我制作的部分脚本:
var edit = $("#editModal");
// var packageName = $("#packageName").val();
//var id = $("#id").val();
//packageName.length > 0 && id.length > 0 ?
$(".btn-edit-save").click(function() {
$("form", edit).submit();
});
问题在这里:
$(".btn-edit-save").click(function() {
$("form", edit).submit();
});
如果输入为空,我不想提交,只显示它们为空的消息。非常感谢
解决方案
您可以将标签错误属于文本框和边框错误字段附加为
$(".btn-edit-save").click(function() {
var title = $('#id').val();
var packageName = $('#packageName').val();
var isValid = true;
if(title == ""){
$('#id').after("<label class='error'>Title is required</label>");
$('#id').css('border', '1px solid red');
isValid = false;
}
if(packageName == ""){
$('#packageName').after("<label class='error'>PackageName is required</label>");
$('#packageName').css('border', '1px solid red');
isValid = false;
}
if(isValid){
//submit form
//$("form", edit).submit();
}
});
$(".btn-edit-save").click(function() {
var title = $('#id').val();
var packageName = $('#packageName').val();
var isValid = true;
if(title == ""){
$('#id').after("<label class='error'>Title is required</label>");
$('#id').css('border', '1px solid red');
isValid = false;
}
if(packageName == ""){
$('#packageName').after("<label class='error'>PackageName is required</label>");
$('#packageName').css('border', '1px solid red');
isValid = false;
}
if(isValid){
//submit form
//$("form", edit).submit();
}
});
.error{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModalLabel">@Resource.Add_new_item </h5>
</div>
<div class="modal-body">
<div class="form-group">
<label>@Resource.Application_category_tittle *</label>
<input name="id" id="id" class="form-control" style="direction: ltr;"/>
</div>
<div class="form-group">
<label>@Resource.Package_name *</label>
<input name="packageName" class="form-control" style="direction: ltr;"id="packageName" />
</div>
<label id="validation">
</label>
<div class="form-group">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-edit-save">@Resource.Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">@Resource.Cancel</button>
</div>
</div>
推荐阅读
- javascript - 过滤数组,然后在数组中映射数组
- json - 当此变量在iOS中包含Null时,如何将Any对象类型的变量转换为String?
- sql-server - 在几天之间安排工作
- google-chrome - Chrome devtools - 页面加载后限制网络
- mongodb - MongoDB 在设置活动键时聚合并保留所有值
- c++ - 借助 new 关键字在 C++ 中创建指针数组
- delphi - 对象模式动作的设计模式
- c# - 如何在按钮单击事件中隐藏gridview列在gridview之外
- r - dplyr 或矢量化方法中的动态变量评估
- javascript - 在 VueJs 中使用 Vue-Router 获取参数失败