如何在MVC中检查ModelValidation后发送通知

我希望用户填写表单，填写后，如果表单与Validations兼容(不能有空值(，我希望向用户显示一个"成功"；通知。但在这段代码中，当我点击保存按钮时，它不会检查验证，即使我没有填写表单，但仍然会按"；成功"；通知。如何在Javascript中检查验证。我在这里缺少什么是因为我在Javascript方面很糟糕？

<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>

<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css  />
<script defer src="~/js/site.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<form method="post" asp-action="Create" id="form" >

<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control"  id="Order" >
@Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="@Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button  class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
New product has been saved successfully.
</div>   
</div>
</div>
</div>
<script type="text/javascript">

$(function () {
$(document).ready(function () {

//function checkFormValidateOrNot() {
//    if ($(".field-validation-error").length > 0) {
//        return false;
//    }
//    $(".form-control").each(function () {
//        if ($(this).attr("data-val") == "true" && $(this).val() == "" &&
//            $(this).is("select") == false) {
//            return false;
//        }
//    });
//    return true;
//}
$("#btnSave").click(function () {

//if (checkValidateOrNot() == true) {
//}
$('#Modal1').modal('show');
});

})

})

</script>
</body>

1.您可以使用jquery.validate.js中存在的validate()方法来验证表单。

2.您最好使用wwwroot文件夹中的默认版本bootstrap和jquery。否则，由于nuget包的兼容性，模态将不会显示。

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

整个工作演示：

<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>     
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>    
<link rel="stylesheet" href="~/css/site.css  />
<script defer src="~/js/site.js"></script>
//modify here...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>       
</head>
<body>
<form method="post" asp-action="Create" id="form" >            
<div class="form-group">    
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control"  id="Order" >
@Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="@Model.Order" class="text-danger"></span>
</div>    
</br>    
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button  class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>    
</div>
</form>
<div id="Modal1" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
New product has been saved successfully.
</div>   
</div>
</div>
</div>    
<script type="text/javascript">

$(function () {
$(document).ready(function () {               
$("#btnSave").click(function () {    
var validator = $("#form").validate();
var flag = validator.form();
if (flag) {
$('#Modal1').modal('show');
}                         
});                  
})                
})      
</script>
</body>

相关内容

最新更新

热门标签：