Comment soumettre l'id du formulaire avec une fonction javascript ?

Question

En général, je le fais :

onclick="myFunction()"

sur mon bouton de soumission, mais ce que je veux faire maintenant sur le html est

<form id="myForm">
<input type="text" id="myTextBox" required> <!-- we're gonna use this id: myTextBox because we're using the getElementById() -->
<input type="submit" value="Click Me"> <!-- we call the function here -->
</form>

sur JS

document.getElementById("myForm").onsubmit = validateBarForm;
    function validateBarForm() {

        var myValue = document.getElementById('myTextBox').value; // inside the getElementById, which element we want to get? 
        if (myValue.length === 0) {
            alert('Please enter a real value in the TextBox');
            return;
        }

mais cela ne fonctionne pas ? comment puis-je également filtrer les espaces blancs ou les blancs qui ne sont pas requis ?

Answer 1

document.getElementById("myForm").onsubmit = validateBarForm;
function validateBarForm() {

    var myValue = document.getElementById('myTextBox').value; // inside the getElementById, which element we want to get? 
    if (myValue.toString().trim().length === 0) {
        alert('Please enter a real value in the TextBox');
        return false;
    }

Edit1 Je m'excuse de ne pas avoir expliqué. Ci-dessous j'explique le changement. J'ai juste coupé la valeur de la chaîne de l'entrée de sorte que tous les espaces blancs sont supprimés. Par la suite, nous pouvons en toute sécurité vérifier la longueur des données d'entrée à 0. Aussi en cas d'alerte, c'est-à-dire lorsque l'entrée n'est pas correcte après l'alerte, nous devrions retourner false afin que le formulaire ne se soumette pas.

Si la fonction est appelée en ligne, par exemple onclick="validateBarForm() ;", elle doit être utilisée correctement avec une instruction de retour comme onclick="return validateBarForm() ;", de sorte que si la fonction renvoie faux, l'action de soumission du formulaire n'est pas déclenchée.

Answer 2

Utilisez ce code :

<form id="myForm" action="#">
<input type="text" id="myTextBox" required> 
<input type="submit" value="Click Me" onclick="validateBarForm()">
</form>
    <script>
    function validateBarForm() {
         var myvalue = document.getElementById("myTextBox").value;
        if(myvalue.length === 0){
            alert("Please enter a real value in the TextBox");
            return false;
        }
        else
            return true;
    }
    </script>

OU,Utilisez ce code :

<form id="myForm" action="#">
<input type="text" id="myTextBox" required oninvalid="alert('Please enter a real value in the TextBox')"> 
<input type="submit" value="Click Me">
</form>