HTML Bootstrap Form - "required" label doesn't work with JS script

Question

Good evening everyone,

I have a problem with the website I'm coding. I have implemented a bootstrap form in the index.html and I have codded a Javascript script, which is linked to the HTML.

Here is the HTML:

    <div class="container">
        <div style="text-align:center">
            <br>
            <h5><span class="badge bg-primary shadow rounded">Enregistrer un résultat</span></h5>
            <br>
        </div>
        <div class="container">
            <div class="row">
                <div class="col align-items-stretch" id="patient_form">
                    <div class="card shadow mb-5 bg-body rounded text-center" style='height: 430px;'>
                        <div class="card-header"><strong>Remplissez les informations du patient</strong></div>
                        <div class="card-body">
                        <p class="card-text">
                            <form class="form-inline" role="form">
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_prenom" autocomplete="off" required/>
                                    <label for="patient_prenom">Prénom</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_nom" autocomplete="off" required/>
                                    <label for="patient_nom">Nom</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_date_naissance" type="date" required>
                                    <label for="patient_date_naissance">Date de naissance</label>
                                </div>
                                <br>
                                <div class="text-center">
                                    <button onclick="searchPatient()" type="submit" class="btn btn-primary btn-sm">Rechercher le patient</button>
                                </div>
                            </form>
                        </p>
                        </div>
                    </div>
                </div>

And here is the Javascript script:

function searchPatient() {
    prenom = document.getElementById('patient_prenom').value;
    nom = document.getElementById('patient_nom').value;
    date_naissance = document.getElementById('patient_date_naissance').value;
    
    document.getElementById("patient_form").style.display = "none";
    document.getElementById("intervention_form").style.display = "block";
    document.getElementById("patient_recap").style.display = "block";    
    document.getElementById('patient_recap_text').innerHTML += '<h5>' + prenom + ' ' + nom + '<h5>' + '<h6>' + date_naissance + ' ' + '<h6>';
}

With this configuration, the "required" label in my first form is not working. But as soon as I'm deleting the line that links the Javascript to the HTML, it's working.

Can you please help me solving this issue?

Thank you very much!!

If there's a possiblity that you may have to change your code in the future, I suggest you don't use [inline event attributes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these). Your post is too much you should include what is most relevant or post a [mcve] that highlights the problem. — zer00ne, Mar 15 '22 at 22:20

score 0 · Answer 1 · answered Mar 15 '22 at 22:18

0

Looks like adding the onclick="searchPatient" to the submit button means that it will run that function immediately and skip form validation. According to this answer, if you're submitting the form via JS, you have to do the validation yourself. Here is how I was able to do it:

First, you need a handle to the form you want to check validation on. The simplest way to do this is with id="form" on the form element.

Then, you just call formElement.checkValidity(), and if it returns false, you don't call your submission logic. For example:

function searchPatient() {
  const form = document.getElementById('form');
  if (!form.checkValidity()) {
    return;
  }

  // ... rest of function like normal
}

Now when I click the button, I get the "this field is required" popup.

answered Mar 15 '22 at 22:18

Jan

848
7
17

Thank you, right, the trick is working. But what should I do if I don’t want the script to run at the same time than the submitting of the form, but only after? I mean what’s the regular way to run a script into a button? Because my second question is still relevant. And it seems that I’m not writing the code in the better way. Thanks – Vida Eninkio Mar 15 '22 at 23:13
I think you don't want the form to ever actually submit, since it's a single-page web app and the "submit" behavior is effectively to refresh the page. The `onclick` hook you're using is the usual way to run a script based on a button! – Jan Mar 16 '22 at 15:58
1

If you need to explicitly prevent the form submission from actually happening, you can do `onsubmit="event.preventDefault()"`. But I think that will prevent the validation logic on `required` fields from happening as well, so in that case you would need to add some custom validation logic as well. You can apply the same Bootstrap validation styles [following their docs](https://getbootstrap.com/docs/5.0/forms/validation/) if you want. – Jan Mar 16 '22 at 16:04

HTML Bootstrap Form - "required" label doesn't work with JS script

1 Answers1