Materialize-stepper form not submitting to MySql database, with nodejs

问题

I have a large html form, So I decided to use materialize-stepper in order to facilitate the UI. But the form doesn;t submit to the MySql db. I have tried using the normal form with few inputs and it submits to the db. I am thinking, Is it because of the 'ul' markup? my code is below

the snippet of the Html form:

    <form class="CreateClient">
      <ul class="stepper horizontal" style="min-height:550px">
         <li class="step active">
           <div class="step-title waves-effect waves-dark">Contact detail</div>
              <div class="step-content">
                 <div class="row">
                 <div class="input-field col s12">
                   <i class="fa fa-user prefix"></i>
                   <input id="icon_prefix" type="text" class="first_name validate" required>
                   <label for="icon_prefix">First Name</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="fa fa-user prefix"></i>
                   <input id="icon_prefix" type="text" class="surname validate" required>
                   <label for="icon_prefix">Surname</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="material-icons prefix">place</i>
                   <input id="icon_place" type="text" class="address validate" required>
                   <label for="icon_place">Address</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="material-icons prefix">local_post_office</i>
                   <input id="icon_post" type="number" class="post_code validate" required>
                   <label for="icon_post">Postcode</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="material-icons prefix">phone</i>
                   <input id="icon_telephone" type="tel" class="telephone validate">
                   <label for="icon_telephone">Daytime Telephone</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="material-icons prefix">phone_iphone</i>
                   <input id="icon_telephone" type="tel" class="mobile validate">
                   <label for="icon_phone_iphone">Mobile</label>
                 </div>
                 <div class="input-field col s12">
                   <i class="material-icons prefix">email</i>
                   <input id="icon_email" type="email" class="email validate">
                   <label for="icon_email">email</label>
                 </div>
               </div>
                 <div class="step-actions">
                   <button class="waves-effect waves-dark btn" type="submit">Submit
                   <i class="material-icons right">send</i>
                   </button>

And this is the node app referencing the classes

    const CreateClient = document.querySelector('.CreateClient')
    CreateClient.addEventListener('submit', (e) => {e.preventDefault()
    const firstName = CreateClient.querySelector('.first_name').value
    const surname = CreateClient.querySelector('.surname').value
    const address = CreateClient.querySelector('.address').value
    const postCode = CreateClient.querySelector('.post_code').value
    const telephone = CreateClient.querySelector('.telephone').value
    const mobilePhone = CreateClient.querySelector('.mobile').value
    const email = CreateClient.querySelector('.email').value

Are these codes well written, are they selecting the classes?, if not is the problem with the plugin I used. I'm pretty new to all these. Please Help me

来源：https://stackoverflow.com/questions/46793330/materialize-stepper-form-not-submitting-to-mysql-database-with-nodejs