I'm trying to get value with ajax in bootstrap 5.

Ajax sends "chip" value to php and returns 1 if there is such data in database, 2 if isn't, 0 if input"chip" field was empty (just for testing).

If it's 1 I want it to display information. If 2 I want to submit the form.

It works great but... it stops default bootstrap validation when required "chip" field is empty.

If I uncomment "if (!chip) event.preventDefault()" it's validated but when value 1 is returned it submits form anyway..

Is there way to display default bootstrap information or I have to show my own when data is 0?

Help :)

document.getElementById("chipButton").onclick = function() {
    
    const dataToSend = {
    chip : document.getElementById("chip").value
    }
    fetch(url, {
    method: 'post', 
    mode: 'cors',
    headers: new Headers({
    'Content-Type': 'application/json'
    }),
    body: JSON.stringify(dataToSend)
    })

    .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log(data)
      if (data.check==1) { 
        pokazKomunikat(data.check)
        } 
      else if (data.check > 1 ) 
        {
          subForm()
        }
      
    });
    
    //if (!chip) event.preventDefault()
    event.preventDefault()

}
function pokazKomunikat(id){
  
  document.querySelector(".chipAlert").innerHTML = 'answer <a href="<?php echo $base_url;?>/aaa/'+id+'/0/0/0"> here</a>';
  document.querySelector(".chipAlert").style.display = "block";
}

function subForm(){
    document.getElementById("chipForm").submit();
}