I've got a contacts directory where you can add, edit and remove contacts.
To add a contact the user has to fill a form which I have validated with the required form however, when filling up the form and leaving one of the boxes blank it says a "field is required" as it should and does not redirect you to the main page meaning the contact has not been added.
The if you fill up all the boxes, it does redirect you to the main page and the contact has been added as it should.
The problem is that once you are back on the main page you can see that both contacts, the one that supposedly has not been added and the one that has been added meaning that even if the field is required the form allows the contact to be added anyway.
I need to know why is this happening as I am unable to identify the reason.
What I have tried:
HTML:
<form name="addForm" class="form-horizontal ng-pristine ng-valid">
<div class="form-group profileRow">
<label class="col-sm-2 control-label" for="firstName">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addEmployeeFirstName" placeholder="First Name" required/>
</div>
</div>
<div class="form-group profileRow">
<label class="col-sm-2 control-label" for="lastName">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addEmployeeLastName" placeholder="Last Name" required/>
</div>
</div>
<div class="form-group profileRow">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="addEmployeeEmail" name="email" placeholder="Email" required/>
</div>
</div>
<div class="form-group profileRow">
<label class="col-sm-2 control-label" for="department">Department</label>
<div class="col-sm-10">
<select id="addEmployeeDepartment"></select>
</div>
</div>
<div class="form-group profileRow">
<label class="col-sm-2 control-label" for="location">Location</label>
<div class="col-sm-10">
<select id="addEmployeeLocation"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-xs btn-primary4" onclick="addEmployee()">ADD</button>
</div>
</div>
JS:
function addEmployee() {
let departmentName = $('#addEmployeeDepartment').val()
$.getJSON(`php/getAllDepartments.php`, function (departments) {
let departmentID = departments.data.filter(dep => dep.name == departmentName)[0].id
$.ajax({
data: {
'firstName': $('#addEmployeeFirstName').val(),
'lastName': $('#addEmployeeLastName').val(),
'email': $('#addEmployeeEmail').val(),
'departmentID': departmentID
},
url: 'php/insertEmployee.php',
dataType: 'json',
success: function(data) {
$('#database').html(`
<h4>
<p class="findID"></p>
<br>
<div class="hideCell">
<p class="hideCell" id="departmentHeader"></p>
<p class="hideCell" id="locationHeader"></p>
<span class="hideCell"
</div>
</h4>
`)
$('#addEmployeeFirstName').val("")
$('#addEmployeeLastName').val("")
$('#addEmployeeEmail').val("")
$('#addEmployeeDepartment').find('option:eq(0)').prop('selected', true);
$.ajax({
type: 'GET',
url: 'php/getAll.php',
dataType: 'json',
success: function(data, letterData) {
var db = data.data;
for (let i in db) {
$('#database').append(`
<div class="loadProfile col-sm-6 col-md-4" onclick="loadProfile(${JSON.stringify(db[i]).split('"').join(""")})">
<div class="widget col-3 profile">
<div class="widget-simple">
<span>
<img src="img/user-regulars.svg" alt="avatar" class="widget-image img-circle pull-left animation-fadeIn">
</span>
<h4 class="widget-content text-left">
<span id="fullName">${db[i].lastName}, ${db[i].firstName}</span>
<p class="findID" style="font-size:11px; color: rgb(190, 190, 190); display: inline"> - ID: ${db[i].id}</p>
<br>
<div class="info" style: "overflow: hidden">
<p class=${filterBy == "department"} style="font-size:11px; color: rgb(190, 190, 190); float: left">${db[i].department}</p>
<p class=${filterBy == "location"} style="font-size:11px; color: rgb(190, 190, 190); float: left">, ${db[i].location}</p>
<a href="" class="btn btn-xs btn-primary2 Phone" data-toggle="tooltip" title="" data-original-title="Phone"></a>
<a href="mailto:${db[i].email}" rel="prefetch" id="eM" class="btn btn-xs btn-primary Email" data-toggle="tooltip" title="" data-original-title="Email"></a>
</div>
</h4>
</div>
</div>
</div>
`)
}
}
})
setTimeout(function(){
$('#confirm').hide();
$('#profilePage').hide();
window. location. reload(1);
}, 1500);
}
})
})
}
Submit an article or tip