如何在javascript中控制验证答案

【问题标题】：how to control validation in javascript如何在javascript中控制验证
【发布时间】：2017-12-06 15:22:36
【问题描述】：

我有一个注册用户的页面。在该页面中，我将字段划分为两个选项卡。所有字段都是必需的。如果用户没有在第一个选项卡中输入字段，我会在第二个选项卡中收到验证错误，因为它是一个页面。如何控制第二个选项卡的验证。

<ul>
<li>first tab</li>
<li>second tab</li>
</ul>
    <div class="row setup-content" id="step-1"> //first tab
<input class='form-control' id='username' required='required' name='username' placeholder='First Name*' type='text' data-error="Please enter name field.">
<button id='next'>Next</button>
</div>

<div class="row setup-content" id="step-1"> //second tab
    <input class='form-control' id='password' required='required' name='password' placeholder='Enter password' type='text' data-error="Please enter Password">
    </div>

<script>
$('#next').click(// code for moving to second tab);
</script>

如果我在未输入用户名的情况下单击下一步按钮，则用户名字段会突出显示，在输入用户名并通过单击下一步按钮移动到第二个选项卡后，由于未输入用户名时导致错误，密码字段也会突出显示。

提前致谢

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

基本上，验证的工作原理是这样的，每次更改时都会验证所有内容，因此所有空字段都显得无效。您可以做一件事：为每个字段定义一个 »pristine« 属性，在第一次更改该字段后将其设置为 false。通过这种方式，您可以排除“未触及”的字段，使其不被验证。

但这会阻止在提交时验证 »pristine« 字段，因此您必须在每种情况下都验证每个字段。

【讨论】：

【解决方案2】：

最快的解决方案是在隐藏的tabs 中使用disable fields，一旦当前选项卡为filled and valid，切换到下一个选项卡并重复该过程。

【讨论】：