Validate form selection option custom input base on product type EDIT

Question

So I think my last question wasn't cleared. Currently I am doing form validation for my project. I have form input with main field of "sku", "name", and "price", with custom select options of product type which have three products(Book, dvd, furniture) each product type has an input area base on the product selected, for example:

[enter image description here][1]

I am able to validate name, price, sku, and select option for errors. I can also console.log product type base on the value selected. The only problem is, I can't stop the form to submit even if my select option have empty input field. I can validate the error of that field only when user type something that is not of corrected value but if user select the option and the field is blank, submit field still able to submit. How would I write a condition that stop submission when the selected input form is blank? Example: "If productType is book, and that book value weight is empty, throw error: weight is needed, else submit.

function for handle submission: This field validate if there's an error, main form is empty, and if option not selected.

 const handleSubmit = (event) => {
event.preventDefault();

if (
  Object.keys(errors).length === 0 &&
  Object.keys(formValues).length !== 0 &&
  select !== ""
)

Answer 1

try placing the 'required' straight after the "<select required"