Click here to Skip to main content
14,938,012 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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:
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:
JavaScript
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);
                
            }
            
        })

    })   
    
}
Posted
Updated 19-Feb-21 2:33am
v4
Comments
W Balboos, GHB 19-Feb-21 8:16am
   
So, you have an ADD button and onclick='addEmployee()'

And what happens in that function? Are we to guess? Considering that the contents of that function (at the least) are critical to the form doing anything at all, perhaps you should enlighten us!
farremireia 19-Feb-21 8:19am
   
I'm sorry, I've just updated it.

1 solution

I don't do jquery, but let me give you a link on how you ought handle this if you'd like to keep to the <form> method of doing things.

One thing, about a form, is that it has a target.
Another thing is that it (normally) has a <input> element of type='submit'. That would give you a direct click and submit route to an "action" attribute. - but you want validation. Well, that's also part of the deal, built in or custom, but only if the form is "SUBMITTED" and you are not doing that.

See Here[^] And Here[^]

The second link may be more helpful in some way than the first, but it's less basic.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900