I am trying to validate input field but not working validation using jQuery steps

Question

I am using the jquery steps plugin and I am trying to validate the input field when I click to next button, but unfortunately getting an error on the console, all fields should be validated please help me with how can I resolve this issue thank u.

Please check error

jquery.validate.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'element')

Note:-i want to validate the input field when I click on the Next button.

HTML view

<form id="myform" action="{{route('signup_form.store')}}" method="POST" class="needs- 
          validation" novalidate >
    @csrf
    <div id="vertical-steps">
        <h3>General</h3>
        <section id="account_information">
            <div class="form-outline">
                <input type="tel" id="typePhone" name="phone"   
                value="{{ old('phone') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typePhone">Mobile</label>
                <div class="invalid-feedback">Please Enter Your Mobile Number.</div>
            </div>
            <div class="invalid-feedback message mt-0"></div>
            @if ($errors->has('phone'))
            <span class="error_form">{{ $errors->first('phone') }}
            </span>
            @endif
            <br>
            <div class="form-outline">
                <input type="text" id="typeText1" name="address" value="{{ old('address') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typeText1">Primary Address</label>
            </div>

            <br>
            <div class="form-outline">
                <input type="text" id="typeText2" name="apartment"  
                   value="{{ old('apartment') }}"
                    class="form-control form-control-lg"  required/>
                <label class="form-label" for="typeText2">Apartment, 
             suite, etc.</label>
            </div>

            <br>
            <div class="form-outline">
                <input type="text" id="typeText3" name="city" value=" 
                     {{ old('city') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typeText">City</label>
            </div>

            <br>
            <div class="position-replative">
                <select class="form-select form-control-lg" 
                   name="state"
                    aria-label="Default select example" >
                    <option selected  readonly disabled value="{{ old('state') }}">Select State</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <br>
            <div class="form-outline">
                <input type="text" id="typeText" name="postal_code" 
                    value="{{ old('postal_code') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typeText">Postal 
              Code</label>

            </div>
        </section>
        <h3>Company Details</h3>
        <section>
            <div class="form-outline">
            <input type="text" id="typeText1" name="company_name" value="{{ old('company_name') }}"
                class="form-control form-control-lg" required/>
            <label class="form-label" for="typeText1">Company Name</label>
            <div class="invalid-feedback">Please Enter Company Name</div>
            </div>
            @if ($errors->has('company_name'))
            <span class="error_form">{{ $errors->first('company_name') }}
            </span>
            @endif
            <br>
            <div class="form-outline">
                <input type="tel" id="typePhone" name="registration_number" value="{{ old('registration_number') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typePhone">Registration Number</label>
            </div>

            <br>
            <div class="form-outline">
                <input type="email" id="typeEmail" name="company_email" value="{{ old('company_email') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typeEmail">Company Email</label>
            </div>

            <br>
            <div class="form-outline">
                <input type="tel" id="typePhone" name="company_mobile" value="{{ old('company_mobile') }}"
                    class="form-control form-control-lg" required/>
                <label class="form-label" for="typePhone">Company Mobile</label>
            </div>
            <button type="submit" id="btnsubmit"  class="w-100 mt-4 btn-lg btn btn-primary"
                name="submit">Finish</button>
        </section>
    </div>
<form>

jquery

 var form = $("#vertical-steps").show();
 var currentIndex;
 $("#vertical-steps")
  .steps({
    headerTag: "h3",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical",
    bodyTag: "section",
    enableFinishButton: false,

    onStepChanging: function (event, currentIndex, newIndex) {
      // Always allow going backward even if the current step contains invalid fields!
      if (currentIndex > newIndex) {
        return true;
      }

      // Forbid suppressing "Warning" step if the user is to young
      if (newIndex === 3 && Number($("#age").val()) < 18) {
        return false;
      }

      var form = $(this);

      // Clean up if user went backward before
      if (currentIndex < newIndex) {
        // To remove error styles
        $(".body:eq(" + newIndex + ") label.error", form).remove();
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
      }

      // Disable validation on fields that are disabled or hidden.
      form.validate().settings.ignore = ":disabled,:hidden";

      // Start validation; Prevent going forward if false
      return form.valid();
    },
    onStepChanged: function (event, currentIndex, priorIndex) {
      // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
      if (currentIndex === 2 && priorIndex === 3) {
        $(this).steps("previous");
        return;
      }

      // Suppress (skip) "Warning" step if the user is old enough.
      if (currentIndex === 2 && Number($("#age").val()) >= 18) {
        $(this).steps("next");
      }
    },
    onFinishing: function (event, currentIndex) {
      var form = $(this);

      // Disable validation on fields that are disabled.
      // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
      form.validate().settings.ignore = ":disabled";

      // Start validation; Prevent form submission if false
      return form.valid();
    },
    onFinished: function (event, currentIndex) {
      var form = $(this);

      // Submit form input
      form.submit();
    },
  })
  .validate({
    errorPlacement: function (error, element) {
      element.before(error);
    },
    rules: {
      phone: {

      },
    },
  });