I can't see an alert advise-CodePudding

I’m studying how to work with HTML forms and JavaScript (JS) and I faced a problem:

I wrote the Meta tags (HTML) and used JS elements, events and functions to treat possible user mistakes. The page shows when user follow in mistake and don’t insert the correct information. But, even with these mistakes, when the “submit button” is used, the alert message is not showing. I tried to inspect what’s happening and browser give a message like:

“DevTools failed to load source map: Could not load content for chrome-extension://nllcnknpjnininklegdoijpljgdjkijc/bundles/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT”.

Here is my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>HTML Forms</h2>

    <form id="formulario" action="">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="">
        <span id="msg-vld-fname" style="color: red; display:none;"></span>
        <br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="">
        <span id="msg-vld-lname" style="color: red; display:none;"></span>
        <br><br>
        <label for="lgenre">Genre:</label><br>
        <select name="lgenre" id="lgenre">
            <option value="select">Select</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <span id="msg-vld-lgenre" style="color: red; display:none;"></span>
        <br><br>
        <input type="submit" value="Submit">
    </form>
    <script src="./index.js"></script>

</body>

</html>

JavaScript `

//selecionar elementos - aqui entra tudo o que vai ser "mexido", "manipulável"
let form = document.getElementById("formulario");
let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
let lgenre = document.getElementById("lgenre");
let fname_msg = document.getElementById("msg-vld-fname");
let lname_msg = document.getElementById("msg-vld-lname");
let lgenre_msg = document.getElementById("msg-vld-lgenre");

//validar quando usuário sai do campo
fname.onblur = function (event) {
    if (event.target.value.length < 3) {
        fname_msg.textContent = "Insert at least 3 carachters"; //exibe a mensagem
        fname_msg.style.display = 'block'; //exibe um valor na tela
    } else {
        fname_msg.style.display = 'none'; //faz o valor da tela "sumir".
    }

}

//validar quando usuário muda um campo
lgenre.onchange = function (event) {
    if (event.target.value == "select") {
        lgenre_msg.textContent = "Select a valida atribute."; //exibe a mensagem
        lgenre_msg.style.display = 'block'; //exibe um valor na tela
    } else {
        lgenre_msg.style.display = 'none'; //faz o valor da tela "sumir".
    }
}

//validar quando usuário entra em um campo
fname.onfocus = function () {
    fname_msg.style.display = 'none';
}

//validar quando usuário envia o formulário
form.onsubimit = function (event){
    if (fname.value.length < 3
        || lgenre.value == "selecione") {
        alert("please, complete this form correctly after submition");
        event.preventDefault();
    }
}

My expactation is: when the form has mistakes, according to the rules, shows the alert and forbiden the submitoin.

CodePudding user response：

First, you wrote your event property incorrectly as: **onsubimit** instead of **onsubmit**.

But, you are using a submit button, which attempts to send the form data to whatever resource the form element's action attribute is set to and it will attempt to redirect the browser to that location. In your case, you're not submitting data anywhere, so you should be using a regular button with a click event handler.

Also, you really should be using the modern standard for setting up event handlers, which is .addEventListener() instead of event properties like onXyz. See the updated code for the button's click event below.

And the 6 heading elements in HTML (h1...h6) should not be used because of the way they style their text. They are for setting up the structure of the document. As such, you should always start with h1 and then only use h2 if you want to create a sub-section of the h1. If you then don't like the style of the text that the heading element produces, use CSS to modify that instead of changing to a heading style that you like to the look of.

//selecionar elementos - aqui entra tudo o que vai ser "mexido", "manipulável"

// You don't need a reference to the form, you need a reference to the button
let button = document.querySelector("input[type='button']");

let fname = document.getElementById("fname");
let lname = document.getElementById("lname");
let lgenre = document.getElementById("lgenre");
let fname_msg = document.getElementById("msg-vld-fname");
let lname_msg = document.getElementById("msg-vld-lname");
let lgenre_msg = document.getElementById("msg-vld-lgenre");

//validar quando usuário envia o formulário
// You should just use a regular button and set up a click event handler for it
// using the modern, standards-based approach of .addEventListener()
button.addEventListener("click", function (event){
    if (fname.value.length < 3
        || lgenre.value == "selecione") {
        alert("please, complete this form correctly after submition");
        event.preventDefault();
    }
});

//validar quando usuário sai do campo
fname.onblur = function (event) {
    if (event.target.value.length < 3) {
        fname_msg.textContent = "Insert at least 3 carachters"; //exibe a mensagem
        fname_msg.style.display = 'block'; //exibe um valor na tela
    } else {
        fname_msg.style.display = 'none'; //faz o valor da tela "sumir".
    }

}

//validar quando usuário muda um campo
lgenre.onchange = function (event) {
    if (event.target.value == "select") {
        lgenre_msg.textContent = "Select a valida atribute."; //exibe a mensagem
        lgenre_msg.style.display = 'block'; //exibe um valor na tela
    } else {
        lgenre_msg.style.display = 'none'; //faz o valor da tela "sumir".
    }
}

//validar quando usuário entra em um campo
fname.onfocus = function () {
    fname_msg.style.display = 'none';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>HTML Forms</h1>

    <form id="formulario" action="">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="">
        <span id="msg-vld-fname" style="color: red; display:none;"></span>
        <br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="">
        <span id="msg-vld-lname" style="color: red; display:none;"></span>
        <br><br>
        <label for="lgenre">Genre:</label><br>
        <select name="lgenre" id="lgenre">
            <option value="select">Select</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <span id="msg-vld-lgenre" style="color: red; display:none;"></span>
        <br><br>
        <input type="button" value="Submit">
    </form>
    <script src="./index.js"></script>

</body>

</html>