提问者:小点点

在这种情况下如何进行必要的验证?


我没有使用表单提交答案,所以“required”命令不起作用。相反,在用户按下按钮之后,我将答案保存在一个变量中以便稍后显示。

 <!-- First Question = 1 -->
        <section class="container-fluid section" id="1" style="display: block;">
            <div class="row">
                <div class="col-12 top">
                    <span id="back-btn" class="question-previous badge badge-pill badge-dark" onclick="back0()">Voltar</span>
                    <span class="question-progress">1/15</span>
                    <a href="#"><h1 class="logo">norun</h1></a>
                </div>
                <div class="col-12 question-title">
                    <h2>Nome da empresa</h2>
                </div>
                <div class="col-12 question-input">
                    <input autofocus type="text" id="answer1" class="input-field">
                </div>
                <div class="col-12 submit-button">
                    <button onclick="next1();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
                </div>
            </div>
        </section>

        <!-- Second Question = 2 -->
        <section class="container-fluid section" id="2" style="display: none;">
            <div class="row">
                <div class="col-12 top">
                    <span class="question-previous badge badge-pill badge-dark" onclick="back1()">Voltar</span>
                    <span class="question-progress">2/15</span>
                    <a href="#"><h1 class="logo">norun</h1></a>
                </div>
                <div class="col-12 question-title">
                    <h2>Ramo de atuação</h2>
                </div>
                <div class="col-12 question-input">
                    <input type="text" id="answer2" class="input-field">
                </div>
                <div class="col-12 submit-button">
                    <button onclick="next2();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
                </div>
            </div>
        </section>

共1个答案

匿名用户

您可以通过添加一个在结尾处带有onsubmit值并返回false的表单来归档相同的内容:

<section class="container-fluid section" id="1" style="display: block;">
            <form onsubmit="next1(); return false">
                <div class="row">
                    <div class="col-12 top">
                        <span id="back-btn" class="question-previous badge badge-pill badge-dark" onclick="back0()">Voltar</span>
                        <span class="question-progress">1/15</span>
                        <a href="#"><h1 class="logo">norun</h1></a>
                    </div>
                    <div class="col-12 question-title">
                        <h2>Nome da empresa</h2>
                    </div>
                    <div class="col-12 question-input">
                        <input autofocus type="text" id="answer1" class="input-field">
                    </div>
                    <div class="col-12 submit-button">
                        <input type="submit" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
            </form>
        </section>

这样做还有一个好处,即用户可以使用标准表单功能,如箭头和tab键等