由于某种原因，数据验证不起作用。不过，如果我在 .click() 内的 valid() 方法之后添加一条警报语句，它会发出警报，这意味着数据无论如何都被认为是有效的。我尝试了不同的方法，包括在 html 文件中将操作按钮设置为外部表单，但这并没有解决问题。那还能是什么？ 目前没有异常或错误。 JavaScript:
$(function () {
$("#EmployeeForm").validate({
rules: {
TextBoxTitle: { maxlength: 4, required: true, validTitle: true },
TextBoxFirstname: { maxlength: 25, required: true },
TextBoxLastname: { maxlength: 25, required: true },
TextBoxEmail: { maxlength: 40, required: true, email: true },
TextBoxPhone: { maxlength: 15, required: true }
},
errorElement: "div",
messages: {
TextBoxTitle: {
required: "required 1-4 chars.", maxlength: "required 1-4 chars.",
validTitle: "Mr. Ms. Mrs. or Dr."
},
TextBoxFirstname: {
required: "required 1-25 chars.", maxlength: "required 1-25 chars."
},
TextBoxLastname: {
required: "required 1-25 chars.", maxlength: "required 1-25 chars."
},
TextBoxPhone: {
required: "required 1-15 chars.", maxlength: "required 1-15 chars."
},
TextBoxEmail: {
required: "required 1-40 chars.", maxlength: "required 1-40 chars.",
email: "need vaild email format"
}
}
});
//custom validator
$.validator.addMethod("validTitle", function (value, element) { // custom rule
return this.optional(element) || (value == "Mr." || value == "Ms." || value == "Mrs." || value == "Dr.");
}, "");
//click event handler for the employee list
$("#employeeList").click(function (e) {
if (!e) e = window.event;
var Id = e.target.parentNode.id;
if (Id === 'employeeList' || Id === '')
Id = e.target.id;
var data = JSON.parse(localStorage.getItem('allemployees'));
clearModalFields();
//add, update or delete?
if (Id === '0') {
setupForAdd();
$('#ImageHolder').html('');
} else {
setupForUpdate(Id, data);
}
});
getAll('');
$("#srch").keyup(function () {
filterData();
});
function filterData() {
filteredData = [];
allData = JSON.parse(localStorage.getItem('allemployees'));
$.each(allData, function (n, i) {
if (~i.LastName.indexOf($("#srch").val())) {
filteredData.push(i);
}
});
buildEmployeeList(filteredData, false);
}
function loadDepartmentDDL(empdiv) {
html = '';
$('#ddlDivs').empty();
var alldepartments = JSON.parse(localStorage.getItem('alldepartments'));
$.each(alldepartments, function () {
html += '<option value="' + this['Id'] + '">' + this['DepartmentName'] + '</option>';
});
$('#ddlDivs').append(html);
$('#ddlDivs').val(empdiv);
}
$("#actionbutton").click(function () {
if ($("#EmployeeForm").valid()) {
if ($('#actionbutton').val() === 'Update') {
update();
} else {
add();
}
}
else {
$("#lblstatus").text("fix existing problems");
$("#lblstatus").css({ "color": "red" });
}
return false;
});
$('#deletebutton').click(function () {
var deleteEmployee = confirm('Really delete this employee?');
if (deleteEmployee) {
_delete();
return !deleteEmployee;
}
else {
return deleteEmployee;
}
});
function setupForUpdate(Id, data) {
$('#actionbutton').val('Update');
$('#modaltitle').html('<h4>Employee Update</h4>');
$('#deletebutton').show();
$.each(data, function (index, employee) {
if (employee.Id === parseInt(Id)) {
$('#TextBoxEmail').val(employee.Email);
$('#TextBoxTitle').val(employee.Title);
$('#TextBoxFirstname').val(employee.FirstName);
$('#TextBoxLastname').val(employee.LastName);
$('#TextBoxPhone').val(employee.Phoneno);
$('#ImageHolder').html('<img height="120" width="110" src="data:image/png;base64,' + localStorage.getItem('StaffPicture') + '"/>');
localStorage.setItem('Id', employee.Id);
localStorage.setItem('DepartmentId', employee.DepartmentId);
localStorage.setItem('Timer', employee.Timer);
loadDepartmentDDL(employee.DepartmentId);
return false;
} else {
$('#status').text('no employee found');
}
});
$('#theModal').modal('toggle');
}
function setupForAdd() {
clearModalFields();
$('#actionbutton').val('Add');
$('#modaltitle').html('<h4>Add New Employee</h4>');
$('#deletebutton').hide();
$('#theModal').modal('toggle');
}
//build the list
function buildEmployeeList(data, allemployees) {
$('#employeeList').empty();
div = $('<div class="list-group"><div>' +
'<span class="col-xs-4 h3">Title</span>' +
'<span class="col-xs-4 h3">First</span>' +
'<span class="col-xs-4 h3">Last</span>' +
'</div>');
div.appendTo($('#employeeList'))
if (allemployees) {
localStorage.setItem('allemployees', JSON.stringify(data));
}
btn = $('<button class="list-group-item" id="0">...Click to add employee</button>');
btn.appendTo(div);
$.each(data, function (index, emp) {
btn = $('<button class="list-group-item" id="' + emp.Id + '">');
btn.html(
'<span class="col-xs-4" id="employeetitle' + emp.Id + '">' + emp.Title + '</span>' +
'<span class="col-xs-4" id="employeefname' + emp.Id + '">' + emp.FirstName + '</span>' +
'<span class="col-xs-4" id="employeelastname' + emp.Id + '">' + emp.LastName + '</span>');
btn.appendTo(div);
});
}
//get all employees
function getAll(msg) {
$('#status').text('Finding employee information...');
ajaxCall('Get', 'api/employees', '')
.done(function (data) {
buildEmployeeList(data, true);
if (msg === '')
$('#status').text('Employees Loaded');
else
$('#status').text(msg + ' - Employees Loaded');
})
.fail(function (jqXHR, textStatus, errorThrown) {
errorRoutine(jqXHR);
});
ajaxCall('Get', 'api/departments/', '')
.done(function (data) {
localStorage.setItem('alldepartments', JSON.stringify(data));
})
.fail(function (jqXHR, textStatus, errorThrown) {
alert('error');
});
}
function clearModalFields() {
$('#TextBoxFirstname').val('');
$('#TextBoxLastname').val('');
$('#TextBoxEmail').val('');
$('#TextBoxTitle').val('');
$('#TextBoxPhone').val('');
$('#modalStatus').text('');
localStorage.removeItem('Id');
localStorage.removeItem('DepartmentId');
localStorage.removeItem('Timer');
loadDepartmentDDL(-1);
}
function add() {
emp = new Object();
emp.Title = $("#TextBoxTitle").val();
emp.FirstName = $("#TextBoxFirstname").val();
emp.Lastname = $("#TextBoxLastname").val();
emp.Phoneno = $("#TextBoxPhone").val();
emp.Email = $("#TextBoxEmail").val();
emp.DepartmentId = $("#ddlDivs").val();
ajaxCall('post', 'api/employees/', emp)
.done(function (data) {
getAll(data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
errorRoutine(jqXHR);
});
$('#theModal').modal('toggle');
return false;
}
function update() {
emp = new Object();
emp.Title = $("#TextBoxTitle").val();
emp.FirstName = $("#TextBoxFirstname").val();
emp.Lastname = $("#TextBoxLastname").val();
emp.Phoneno = $("#TextBoxPhone").val();
emp.Email = $("#TextBoxEmail").val();
emp.Id = localStorage.getItem('Id');
emp.DepartmentId = localStorage.getItem('DepartmentId');
emp.DepartmentName = $('#ddlDivs').val();
emp.Timer = localStorage.getItem('Timer');
if (localStorage.getItem('StaffPicture')) {
emp.Picture64 = localStorage.getItem('StaffPicture');
}
ajaxCall('put', 'api/employees/', emp)
.done(function (data) {
$("#status").text(data);
if (data.indexOf('not') == -1) {
$('#ImageHolder').html('<img height="120" width="110" src="data:image/png;base64,' + localStorage.getItem('StaffPicture') + '"/>')
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
errorRoutine(jqXHR);
});
$('#theModal').modal('toggle');
return false;
}
$("input:file").change(() => {
var reader = new FileReader();
var file = $('#fileUpload')[0].files[0];
if (file) {
reader.readAsBinaryString(file);
}
reader.onload = function (readerEvt) {
//get binary data then convert to encoded string
var binaryString = reader.result;
var encodedString = btoa(binaryString);
localStorage.setItem('StaffPicture', encodedString);
}
});
//delete employee
function _delete() {
ajaxCall('Delete', 'api/employees/' + localStorage.getItem('Id'), '')
.done(function (data) {
getAll(data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
errorRoutine(jqXHR);
});
$('#theModal').modal('toggle');
}
//cal ASP.NET WEB API server
function ajaxCall(type, url, data) {
return $.ajax({
type: type,
url: url,
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
processData: true
});
}
function errorRoutine(jqXHR) {
if (jqXHR.responseJSON == null) {
$('#status').text(jqXHR.responseText);
}
else {
$('#status').text(jqXHR.responseJSON.Message);
}
if (jqXHR.responseJSON === null) {
$("#lblstatus").text(jqXHR.responseText);
}
else {
$("#lblstatus").text(jqXHR.responseJSON.Message);
}
} //errrorRoutine
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CRUD</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/employee.css" rel="stylesheet" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #686868">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">#2</a>
<div class="col-xs-2"> </div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" id="menu">
<li><a href="/employee.html">Home</a></li>
<li><a href="/employeecrud.html" data-toggle="modal">CRUD</a></li>
</ul>
<div class="input-group col-xs-push-3 col-sm-2 col-xs-4 navbar navbar-brand" style="position:absolute; left:1200px;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" id="srch" class="form-control form-md">
</div>
<div id="version" style="color:white; float:right;"><p>v2.0</p></div>
</div>
</nav>
<div class="container">
<div style="padding-top:15%;">
<div class="panel panel-default">
<div class="panel-heading text-center" id="status" style="font-weight:bold;"></div>
<div class="panel-body">
<div id="employeeList"></div>
</div>
</div>
</div>
</div>
<form id="EmployeeForm" name="EmployeeModalForm" method="post" action="">
<div class="modal fade" id="theModal" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<div id="modelTitle"></div>
<h4>Employee Update - v2.0</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading text-center">
Employee Information
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4">Title:</div>
<div class="col-xs-8"><input type="text" placeholder="enter title" id="TextBoxTitle" class="form-control" /></div>
</div>
<div class="row">
<div class="col-xs-4">First:</div>
<div class="col-xs-8"><input type="text" placeholder="enter first name" id="TextBoxFirstname" class="form-control" value="Joe" /></div>
</div>
<div class="row">
<div class="col-xs-4">Surname:</div>
<div class="col-xs-8"><input type="text" placeholder="enter last name" id="TextBoxLastname" class="form-control" value="Blow" /></div>
</div>
<div class="row">
<div class="col-xs-4">Phone#:</div>
<div class="col-xs-8"><input type="text" placeholder="enter phone" id="TextBoxPhone" class="form-control" value="(555)555-5555" /></div>
</div>
<div class="row">
<div class="col-xs-4">Email:</div>
<div class="col-xs-8"><input type="text" placeholder="enter email" id="TextBoxEmail" class="form-control" value="jb@ss.com" /></div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Department:</strong></div>
<div class="col-xs-8">
<select id="ddlDivs" name="ddlDivs" class="form-control"></select>
</div>
</div>
<div class="row">
<div class="col-xs-4">Picture:</div>
<div class="col-xs-8" id="ImageHolder" style="padding-top:2%;" />
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-8"><input id="fileUpload" type="file" /></div>
<div class="col-xs-4"><input type="submit" value="Update" id="actionbutton" class="btn btn-default" style="position:absolute; right:100px; z-index:100; top:30px" /></div>
<div class="col-xs-4"><input type="button" value="Delete" id="deletebutton" class="btn btn-danger" style="position:absolute; top:30px; right:5px;" /></div>
<label class="col-xs-12 text-center row" id="lblstatus" style="padding-top:10px;"></label>
<div id="status" class="text-left" style="padding-top:5%;"></div>
</div>
</div>
</div>
</div>
</form>
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/employeecrud.js?newversion"></script> <!--Google Chrome does not load the newest version of the code. Adding unique string helps-->
</body>
</html>
最佳答案
jQuery 验证器根据元素的名称而不是其 id 进行工作。
例如，在您的电子邮件输入中，您应该添加:name="TextBoxEmail"
像这样:
<input type="text" placeholder="enter email" id="TextBoxEmail" name="TextBoxEmail"
class="form-control" value="jb@ss.com" />
关于javascript - 数据在 JQuery 中未经验证而更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48134438/