我正在尝试验证我的asp.net核心剃刀页面,但是由于某种原因,它无法正常工作。使用JQuery
我尝试使用的代码如下。条件$(“#Add_Form”)。valid,如果为false,则集中在错误消息上
if ($("#Add_Form").valid())
ehi(data);
else
validator.focusInvalid();
return false;
我想验证必填字段并关注错误 这是我的代码 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personals - xxxxx</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link href="/lib/xxxxx/css/main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
</header>
<div class="container"><div class="topnav text-center">
<a class="active" href="#home">Home</a>
<input type="text" placeholder="Search.."><button type="button" class="btn btn-primary btn-sm">Search</button> <div class="mr-6"> <a class="dept dropdown-item" href="#">
</a></div>
</div>
<div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
Use this space to summarize your privacy and cookie use policy. <a class="alert-link" href="/Home/Privacy">Learn More</a>.
<button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string=".AspNet.Consent=yes; expires=Wed, 22 Jul 2020 21:52:50 GMT; path=/; secure">
<span aria-hidden="true">Accept</span>
</button>
</div>
<main role="main" class="pb-3">
<div class="container">
<div class="col-md-12"><div class="col-md-6"><h2>Personal Details</h2> </div><div class="col-md-6 text-right">Others here</div></div>
<div class="row border border-info ">
<div class="col-md-3">
<div class="Navigation_Accounts table-bordered">
</div>
<div class="col-md-1">
</div>
<div class="col-md-5 summary text-center" id="Wait">
<div id="Wait2"> <br /> Please wait<br /><br /></div>
<img src="/images/giphy.gif" />
</div>
<div class="col-md-5 " id="Main" style="display:none;">
<form id="Add_Form" action="/Users/Address_Add" method="post">
<br />
<div class="form-group">
<label class="control-label" for="Username">Username</label>
<input required class="form-control" maxlength="15" type="text" data-val="true" data-val-length="The field Username must be a string with a minimum length of 6 and a maximum length of 50." data-val-length-max="50" data-val-length-min="6" data-val-required="Please enter your chosen Username" id="Username" name="Username" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="First_Name">First Name</label>
<input required class="form-control" maxlength="50" type="text" data-val="true" data-val-length="The field First_Name must be a string with a minimum length of 2 and a maximum length of 50." data-val-length-max="50" data-val-length-min="2" data-val-required="Please enter the first name" id="First_Name" name="First_Name" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="First_Name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="Last_Name">Last Name</label>
<input required class="form-control" maxlength="50" type="text" data-val="true" data-val-length="The field Last_Name must be a string with a minimum length of 2 and a maximum length of 50." data-val-length-max="50" data-val-length-min="2" data-val-required="Please enter the last name" id="Last_Name" name="Last_Name" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Last_Name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="Mobile">Mobile</label>
<input required class="form-control" maxlength="15" type="tel" id="Mobile" name="Mobile" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Mobile" data-valmsg-replace="true"></span>
</div>
<br />
<hr />
<br />
<div class="form-group">
<input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
</div>
<br />
<hr />
<br />
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8IPMXGj67c9AsKAqp5ytxNhbHVg-ncNpnjgL-yPmL8t39U_yUEGKeAWKm99V2U-DRraopNiH4EGsmzAtOkfZt_ZQiH7nT-QsDfC7EnoRyBqvgflXMaZpXKotd6M18IXGneVRWm0SgF_tOwJZfuCABoo" /></form>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="row col-md-12">
<div class="row col-md-12">
With your online address manager, you can connect to your social media accounts <br />
- Set birthday reminders<br />
- Set Alarms<br />
- Send presents to a virtual or physical address<br />
</div>
<div class="col-md-4 btn">
<a href="/Address_Manager/Addresses">
My Addresses<br /> <img src="/images/icons/Address_Home.png" /><br />
Billing, Shipping and Home addresses
</a>
</div>
<div class="col-md-4 btn">
<a href="/Address_Manager/Add">
My Contacts<br />
<img src="/images/icons/Address_Virtual.png" /><br />
</a>
<a href="/Address_Manager/Email">Email Contacts </a> or <a href="/Address_Manager/Mobile">Mobile Contacts</a>
</div>
<div class="col-md-4 btn">
Organizer<br />
<img src="/images/icons/Organizer.png" />
</div>
</div>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - xxxxx - <a href="/Home/Privacy">Privacy</a>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script>
$(document).ready(function () {
$('#Main').show();
$('#Wait').hide();
$('#Add_Submit').on("click", function (e) {
e.preventDefault();
var last_Name = $("#First_Name").val();
var first_Name = $("#Last_Name").val();
var mobile = $("#Mobile").val();
var Username = $("#Username").val();
var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();
var data = { __RequestVerificationToken: token, First_name: first_Name, Last_name: last_Name };
if ($("#Add_Form").valid())
ehi(data);
else
validator.focusInvalid();
return false;
});
function Dawn(data) {
$.ajax({
type: "POST",
url: "Personal",
dataType: 'json',
data: data,
success: function (message) {
$('#Wait2').slideDown(90).show().text('<div class="Text-Center">Thank you <br/>Your Account has been successfully updated</div>');
// $('#giphy').hide():
},
error: function (message) {
$('#Wait2').slideDown(90).show().html('<div class="Text-Center">There was an error - Please try again</div>');
// $('#giphy').hide():
}
});
};
});
</script>
</body>
</html>