[Vuejs]-Applying Validation to Input field before opening Bootstrap Model in Vue Laravel

by

0👍

As you’re not using any client side validation engine and relying on native HTML form constraints, we can continue on with the native constraints api. You can get all the elements of a form (in this case, by name) and call checkValidity on them. We can then loop each of those elements within the form to determine the validity state prior to showing our modal:

AddAccessory() {
  const valid = [].slice.call(document.forms.add_accessory.elements).map((el) => {
    return el.checkValidity()
  }).filter((v) => v === false).length === 0 

  if (valid) {
    $('#accessory').modal('show');
  }
}

Make sure to give your form element a name so it can be found correctly:

<form name="add_accessory" type="multipart/form-data"

Leave a comment