Employee Information Form - Copy this Html, Bootstrap Component to your project
<body> <div id="employeeWindow" style="display:none;"> <form id="employeeForm" class="needs-validation" novalidate> <div class="row g-4"> <div class="col-md-6"> <div class="form-floating"> <input type="text" class="form-control" id="employeeCode" placeholder="Employee Code" required aria-label="Employee Code"> <label for="employeeCode">Employee Code</label> <div class="invalid-feedback">Please enter employee code</div> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="text" class="form-control" id="employeeName" placeholder="Employee Name" required aria-label="Employee Name"> <label for="employeeName">Employee Name</label> <div class="invalid-feedback">Please enter employee name</div> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="date" class="form-control" id="birthdate" required aria-label="Birthdate"> <label for="birthdate">Birthdate</label> <div class="invalid-feedback">Please select birthdate</div> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="text" class="form-control" id="phoneNumber" placeholder="Phone Number" pattern="[0-9]{10}" maxlength="10" required aria-label="Phone Number" onkeypress="return /[0-9]/i.test(event.key)" oninput="validatePhoneNumber(this)"> <label for="phoneNumber">Phone Number</label> <div class="invalid-feedback" id="phoneError">Phone number must be exactly 10 digits</div> </div> </div> <div class="col-12"> <div class="form-floating"> <textarea class="form-control" id="address" placeholder="Address" style="height: 100px" required aria-label="Address"></textarea> <label for="address">Address</label> <div class="invalid-feedback">Please enter address</div> </div> </div> <div class="col-12 text-center"> <button type="button" id="btnSave" class="btn btn-primary">Lưu </button> <button type="button" id="btnCancel" class="btn btn-secondary">Hủy</button> </div> </div> </form> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://kendo.cdn.telerik.com/2023.2.804/js/kendo.all.min.js"></script> </body>
