# First text field mandatory

Create your multi-text question in SynoSurveys.

<figure><img src="https://3256950692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ViByLqKSYWJoXIHUUnY%2Fuploads%2FGb6xYKlvQ6bTeXulbmHG%2Fimage.png?alt=media&#x26;token=d50baa80-f4bf-44e6-9313-61f84097a82e" alt=""><figcaption></figcaption></figure>

Turn off mandatory setting for this multi-text question

<figure><img src="https://3256950692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ViByLqKSYWJoXIHUUnY%2Fuploads%2Fm9sV6YHC49uAuYpAPiiM%2Fimage.png?alt=media&#x26;token=4d423f49-22c1-4188-8615-fd2469cc098e" alt=""><figcaption></figcaption></figure>

Add this code into the Javascript editor

<figure><img src="https://3256950692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ViByLqKSYWJoXIHUUnY%2Fuploads%2FsXa5iofzFElONqH5t45Q%2Fimage.png?alt=media&#x26;token=9190eec8-4744-4a91-9659-0ec02e8385cc" alt=""><figcaption></figcaption></figure>

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.

```javascript
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

<figure><img src="https://3256950692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ViByLqKSYWJoXIHUUnY%2Fuploads%2F3UbG6ztQKa07ZsV2I4VZ%2Fimage.png?alt=media&#x26;token=97d0b195-e94a-4fd2-b063-299c9b84a430" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3256950692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8ViByLqKSYWJoXIHUUnY%2Fuploads%2FqlayD5kN6nNpAqmaRFWa%2FCaptura%20de%20pantalla%202023-05-04%20085930.png?alt=media&#x26;token=36b651a0-5bd1-4af2-b033-f66109322342" alt=""><figcaption></figcaption></figure>
