javascript - 如何要求点击按钮

Question

我有一个带有此输入和按钮的表单:

<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
        <div id="mydiv"></div>
<input type="submit" id ="button2" value="next">

我正在使用此 JavaScript 代码来附加用户在此按钮中插入的“输入”数量:

$(function()
    {
        var c = 0;

        $("#button1").click(function(){
            c = $("#inputs").val();

            $("#mydiv").html("");

            for(i=1;i<=c;i++)
            {
                $("#mydiv").append('<input type="text" id="name'+i+'" name="name'+i+'" placeholder="name'+i+'">');
                $("#mydiv").append('<input type="number" id="rating'+i+'" name="rating'+i+'" min="1" max="10" placeholder="rating'+i+'"><br/>');
            }
        });

        $("#button2").click(function()
        {
            if(c===0)
            alert('must click on "continue" button');
            });
        });

    });

我试图要求用户在“输入”(输入类型)中输入一个值，然后单击“继续”(button1)按钮。这样它就不起作用(必须在“输入”中输入一个值，但可以单击“button2”而不单击“button1”)。如何要求用户同时单击“button1”(继续)？

谢谢。

Answer 1

$(function() {
        var c = 0;
        
        $("#button1").click(function() {
            if( !$('#inputs')[0].checkValidity() ) {
                alert( $('#inputs')[0].title );
                return false;
            }
            c = +$("#inputs").val();
            
            $("#mydiv").html("");
            
            for (i = 1; i <= c; i++) {
                $("#mydiv").append('<input type="text" id="name' + i + '" name="name' + i + '" placeholder="name' + i + '">');
                $("#mydiv").append('<input type="number" id="rating' + i + '" name="rating' + i + '" min="1" max="10" placeholder="rating' + i + '"><br/>');
            }
            $('#button2').prop('disabled',false);
        });
        
        $("#button2").click(function() {
            if (c === 0) {
                alert('must click on "continue" button');
            } else {
                alert('Now let us move ahead');
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
<div id="mydiv"></div>
<input type="submit" id="button2" value="next" disabled>