Disable submit button in the html form if the input is incorrect

Question

Disable submit button in the html form if the input is incorrect

205 Views Asked by Vira Lavrova At 15 November 2022 at 11:04

So, the main thing is the field

 function displaySubmit(hdd, answer) {

            document.getElementById(answer + 'Question').style.display = "block";
            document.getElementById(hdd + 'Answer').style.display = "block";
            if (!((answer == "yes" && hdd == "Hard Disk Drive") || answer == "no")) {
                $('f1').submit(function () {
                    $(this).find(':input[type=submit]').prop('disabled', true);
                });
            }
        }

I want to unable submit button only if the answer (input) is "Hard Disk Drive". So, the condition for submit button to be unabled is if the answer on question "Are you a lady?" is "Yes" and the answer on the question about HDD is "Hard Disk Drive" or if the answer on question "Are you a lady?" is "No".

I've tried to write a javascript function for this, but am not sure whether I've put the right commands for disabling the button. Here is the full code:

<!DOCTYPE html>
<html>
<head>
    <title>Shit2</title>
    <link rel="stylesheet" href="1.css">
    <meta charset="utf-8">
    <link rel="shortcut icon" href="aleksei.jpg" />
    <script>
        function displayQuestion(answer) {

            document.getElementById(answer + 'Question').style.display = "block";

            if (answer == "yes") { // hide the div that is not selected

                document.getElementById('noQuestion').style.display = "none";

            } else if (answer == "no") {

                document.getElementById('yesQuestion').style.display = "none";

            }

        }
        function displaySubmit(hdd, answer) {

            document.getElementById(answer + 'Question').style.display = "block";
            document.getElementById(hdd + 'Answer').style.display = "block";
            if (!((answer == "yes" && hdd == "Hard Disk Drive") || answer == "no")) {
                $('f1').submit(function () {
                    $(this).find(':input[type=submit]').prop('disabled', true);
                });
            }
        }
    </script>
</head>
<body>
   
    <br />
    <form id="f1" action="file:///C:/Users/home/Documents/website1/submit.html?">
        
        <p class="areyoualady"> Are you a lady?</p>
        <label>
            <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />Yes
        </label>
        <label>
            <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />No
        </label>

        <div id="yesQuestion" style="display:none;">
            <br />
            What is the full name of HDD?
            <input type="text" id="Hdd" placeholder="Hard Dick Drive" required />
        </div>

        <div id="noQuestion" style="display:none;">
            <br />
            <p>Only ladies are asked questions :)</p>
        </div>
        </br>

        <input type="submit" href='file:///C:/Users/home/Documents/website1/submit.html?' />

    </form>

</body>

P.S. Don't pay attention to the content, it's just to make fun of my lecturer

Original Q&A

There are 1 best solutions below

**Armen Michaeli** · Answer 1 · 2022-11-15T11:57:01.317000

The idiomatic solution to problems like you have demonstrated -- where the form shouldn't submit unless an input value conforms to a specific pattern including being a specific text string, is to use a combination of required, pattern and/or setCustomValidity properties alone:

<form>
    <input name="hdd" pattern="Hard Disk Drive" required />
</form>

The form defined above won't be submittable unless the value of the input element named "hdd" is "Hard Disk Drive".

However, pattern wasn't arguably designed to flag invalid values verbatim necessarily, it's more to define well, patterns of valid values.

I'd use setCustomValidity instead:

<form>
    <input name="hdd" required />
    <script>
        (function setup_hdd_input(hdd_input) {
            hdd_input.addEventListener("change", ev => {
                ev.target.setCustomValidity((ev.target.value == "Hard Disk Drive") ? "" : "The value is expected to be 'Hard Disk Drive'");
            });
        })(document.currentScript.previousElementSibling);
    </script>
</form>

In the above, whenever the value of the input field is changed, setCustomValidity is called with an empty string (which communicates to the user agent that the value "valid") or a custom error message string (which communicates that the value is "invalid" and will be displayed by the user agent next to the input field if the [now invalid] form is attempted submitted).

Disable submit button in the html form if the input is incorrect

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FORMS

Related Questions in ERROR-CHECKING

Trending Questions

Popular # Hahtags

Popular Questions