test

by nicosa

HTML

<form action="#" method="POST" id="add_employee_form" enctype="multipart/form-data">
<span id="error"></span>
<div class="modal-body p-4 bg-light">
          <div class="row">
            <div class="col-lg">
              <label for="fname">First Name</label>
              <input type="text" name="fname" class="form-control name" placeholder="First Name" required>
            </div>
            <div class="col-lg">
              <label for="lname">Last Name</label>
              <input type="text" name="lname" class="form-control" placeholder="Last Name" required>
            </div>
          </div>
          <div class="my-2">
            <label for="email">E-mail</label>
            <input type="email" name="email" class="form-control" placeholder="E-mail" required>
          </div>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" id="add_employee_btn" class="btn btn-primary">Add Employee</button>
        </div>
      </form>

JavaScript

$("#add_employee_form").submit(function(e) {
        e.preventDefault();
  			var error = '<li>error</li>';
        var noerror = '<li>no error</li>';
   			count = 1;
        
        	$('.name').each(function(){

						if($(this).val() == '')
						{
							error += "<li>Enter Item Name at  Row</li>";
						}
						count = count + 1;

					});
       if(error == '')
		{
			$('#error').html('<div class="alert alert-danger"><ul>'+noerror+'</ul></div>');
		}
		else
		{
		$('#error').html('<div class="alert alert-danger"><ul>'+error+'</ul></div>');
		}

   });