I have a form and its validations configured with bootstrap but I have a custom validation with javascript and I want to know how I can bypass the bootstrap validation of that input only.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" name="form1" class="needs-validation" method="post" action="<?= pubUrl ?>" novalidate>
<div class="row">
<label for="Datos Adicionales" class="form-label">Datos Adicionales</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
<path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"></path>
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path>
</svg>
</span>
<input type="text" name="data" id="data" class="form-control" required>
</div>
</div>
<button type="button" class="submit"></button>
</form>
how I can
Well, the only way I found to omit validation is to stop using the .was-validate class for the form, since doing so validates all the input inside.
So I looped through each input separately and handled its validation by adding the .is-valid and .is-invalid classes. and clearly omitting the input that I did not want to validate with bootstrap.