Uncaught typeerror: $(...).registermessage is not a function

See more:

jQuery

HTML5

bootstrap

Hi Team

I am getting this error on my register js file, how do i resolve it and have included the jquery plugin library for it.

What I have tried:

<pre>/**
*@author:Gcobani Mkontwana
*@date:03/05/2023
*@Register users to the form and validate empty submission.
**/
$(document).ready(function() {
  $('#registration-form').submit(function(event) {
    event.preventDefault(); // prevent the form from submitting normally

    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();

    // validate the form data
    if (!name || !email || !password) {
      alert('Please fill in all fields');
      return;
    }

    // submit the form data using AJAX
			$.ajax({
			type: 'POST',
			url: 'register.php',
			data: {
			name: name,
			email: email,
			password: password
		},
		success: function(response) {
		if (response === 'success') {
		$('body').registerMessage('Registration successful', 'success');
		window.location.href = 'dashboard.php';
		} else {
		$('body').registerMessage('Registration failed', 'alert');
    }
	}
	});

  });
});

/**
<pre lang="Javascript">*@author:Gcobani Mkontwana
*@date:03/05/2023
*@Validates messages for registering users to the ecommerce_site.
*/
(function($) {
  $.fn.registerMessage = function(message, type) {
    // create a new element to display the message
    var messageElem = $('<div>', {
      class: 'register-messages ' + type,
      text: message
    });

    // append the message element to the div card
    $('#registration-messages').html(messageElem);

    // set a timeout to remove the message element after 5 seconds
    setTimeout(function() {
      messageElem.remove();
    }, 5000);
  };
})

<div class="card">
  <div class="card-body">
    <form id="registration-form" action="register.php" method="POST">
      <div class="form-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="Name">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" id="email" name="email" placeholder="Email">

      </div>
      <div class="form-group">
        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
 <div class="form-group" id="registration-messages"></div>
</div>
<!----Javascript files validation during form submission ---->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/register-messages.js"></script>
<script src="js/register.js"></script>