First text field mandatory

Make the first input of a multi-text as mandatory

Create your multi-text question in SynoSurveys.

Turn off mandatory setting for this multi-text question

Add this code into the Javascript editor

Change this two parameters: question_code with the code of the multi-text and message to the message you want to show to the respondent if the first row is not filled.

const question_code = "Q1";
const message = `Your custom error message here`;
const question_card = document.querySelector(`#q_${question_code}_card`);
const inputs = question_card.querySelectorAll("input, textarea");
const next_button = document.querySelector("#p_next");

next_button.addEventListener("click", (e) => {
  const feedback = question_card.querySelector(`#feedback_${question_code}`);
  
  if(inputs[0].value == ""){
    e.preventDefault();

    inputs[0].classList.add("is-invalid");
    if(feedback !== null){
      feedback.remove();
    }
    
    const title = question_card.querySelector("h5");
    title.insertAdjacentHTML(
        "afterend",
        `<span class="d-block custom-error pb-1 text-center" id="feedback_${question_code}">
          <span class="form-error-message text-danger">
            ${message}
          </span>
        </span>`
    );

    question_card.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
  }
});

Click the save button

Once you publish the changes of your survey and try the multi-text question, you should see the following behavior:

Last updated

Was this helpful?