Materialize css modal validation

Question

I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server. In that form I am checking if all fields are having value.

<form>
            <div class="input-field">
                <input type="text" id="title"  class="validate" required="" aria-required="true">
                <label for="title">Title</label>
            </div>

The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.

Answer 1

Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.

1. User Submits form
2. We check the form
3. We feedback to user

Depending on the results of 2, we may either go back to step 1, or on to step 3.

Modal Structure:

  <div id="modal1" class="modal">
    <div class="modal-content">
      <div class="input-field">
         <input type="text" id="title"  class="validate" required="" aria-required="true">
         <label for="title">Title</label>
         <span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
        </div>
    </div>
    <div class="modal-footer">
      <a id="submit-button" href="#!" class="btn">Submit</a>
      <a href="#!" class="btn modal-close waves-effect waves-red red">close</a>
    </div>
  </div>

We add optional helper-text span for user feedback, as per the documentation.

The Javascript:

document.addEventListener('DOMContentLoaded', function() {
    
    // init modal
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  
    // get button
    var button = document.querySelector('#submit-button');
  
    // Run our own function when clicked
    button.addEventListener("click", checkForm);
  
    // Function checks for input
  
    function checkForm() {
      var input = document.querySelector('#title');
      
      if(input.value) {
        
        // submit form
        
        // add valid class to show helper
        input.classList.add('valid');
        // close modal
        instances[0].close();
        // clear form
        input.value = '';
        // remove valid class
        input.classList.remove('valid');
      } else {
        // prompt user for input
         input.classList.add('invalid');
      }
    }
  
  
  });

We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.

The only thing you need to add to this is the actual form submission - so something like form.submit().

Codepen.