Question

<input class="form-control" type="text" name="txtSpouseOccupation" id="txtSpouseOccupation" required>
<button type="button" id="next_personal" class="form-control btn-success" style="width:10%" onclick="openTab(event,'dependentTab')">Next</button>

当我单击下一步按钮时，它会转到下一个选项卡，即使输入尚未填写，也会忽略所需的内容

Answer 1

您可以使用此简单属性必需满足您的需求。因此，下面我将添加示例；

{{1}}

因此，当您单击按钮导航至下一页或选项卡时，它将在相关文本框附近显示简单消息以填充该字段。尽管您使用了选项卡，但可以使用它。

Answer 2

在这种情况下，两个元素都是相互独立的。您有text/input的功能是接受输入，然后有submit button的功能是在点击时执行操作。

现在required仅在您定义submit button和input/text之间的关系时才有效。 <form>元素会为您做到这一点，因为它包装了两个元素，并且submit button的默认操作是提交表单，然后在提交之前将检查输入值是否为根据{{1}}分配。

但是您单击它会触发一个功能。如果您只是想通过提交required=true

进入某些url

尝试form

Form

或者您可以使用<form action="your url" method="GET or POST"> <input type= "text" required ="true"/> <button type = "submit" >next</button> </form>。

javascript

function newTab(){
  let input = document.getElementById('text-input').value;
  if(input === ""){
    alert('please fill text')
    return;
   }
   window.location.href = 'http://google.com';
}

我如何首先使所需的文本字段工作，然后再进行onclick工作

2 个答案: