Put Required in function

Asked

Viewed 286 times

1

I want the text box to be mandatory so I have to fill it out, can you help?

<html>
    <body>
        <p>Please input a number between 1 and 10:</p>

        <input id="numb">

        <button type="button" onclick="myFunction()">Submit </button>

        <p id="demo"></p>

        <script>
            function myFunction() {
                var x, text;

                // Get the value of the input field with id="numb"
                x = document.getElementById("numb").value;

                // If x is Not a Number or less than one or greater than 10
                if (isNaN(x) || x < 1 || x > 10)  {
                    text = "Input not valid";
                } else {
                    text = "Input OK";
                }

                document.getElementById("demo").innerHTML = text;
            }
        </script>
    </body>
</html>
javascript html

4 answers

1

In his <script> you can try the following code beyond the message you return:

<script>
    function myFunction() {
        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10)  {
            text = "Input not valid";
        } else {
            text = "Input OK";
            document.getElementById("id-do-seu-formulario").submit();
        }

        document.getElementById("demo").innerHTML = text;
    }
</script>

With that, in case Input is OK, it engages the Ubmit of your form.

  • I appreciate your help! A thank you very much!

  • If this answer helped you, you could mark it as correct! In case of contraction, if you have not succeeded, we can keep trying to help you.

1

Hey, how you doing? I’m not sure I quite understand your question, but come on. Note: I took the liberty of making some changes to the code.

<html>

<head>
	<script>
	function myFunction() {
		var elements = {
			input: document.getElementById('numb'),
			label: document.getElementById('result'),
			
		};
		
		var rgx = new RegExp(/^\d+$/);
		
		if (!!elements.input.value)  {
			elements.label.innerHTML = rgx.test(elements.input.value)? 'Input OK' : 'Input not valid';
			return;
		}
		
		elements.label.innerHTML = 'Input not valid';
	}
	</script>
</head>
<body>
        <p>Please input a number between 1 and 10:</p>

        <input id="numb">

        <button type="button" onclick="myFunction()">Submit </button>

        <p id="result"></p>
    </body>
	
</html>

1

0

This way it’s much easier, it should help you:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <form action="">
    <p>Please input a number between 1 and 10:</p>

        <input id="numb" type="number" max="10" min="1" required name="teste">

        <button type="submit">Submit </button>

    </form>
</body>

Notice that I put the property max and min in the input, this already validates for you the range of numbers you want to be allowed inside the input.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.