如何使必填字段在有效时不可见

How to make a required field be invisible if valid?

本文关键字：有效 何使必 字段      更新时间：2023-09-26

我有这种html:

<form method="post" action="register">
    <input type="text" name="name" required />
    <button>Next</button>
</form>

当我单击"下一步"按钮时，我想隐藏"名称"字段，但前提是它是有效的（不是空的），并且我不想提交表单。如何使用纯JavaScript来做到这一点？

如果你知道使用jQuery的方法，请也写出来。谢谢

试试这个：

$('button').click(function() {
var check = $('#name').val();
if (check == '') {
    $('#name').hide();
}
})

如果输入没有内容，它将被隐藏。

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    
    var input = e.target.firstElementChild;
    
    if(!input.validity.valueMissing) {
        input.style.display = 'none';
    }
}, false);
<form method="post" action="register">
    <input type="text" name="name" required />
    <button>Next</button>
</form>

假设您将为按钮的ID更改"form button"，并为输入的ID更改"form input"。jQuery代码应该是这样的：

$("form button").click(function() {
    if ($("form input").val() != "")
        $("form input").hide();
});

试试这个：

<form method="post" action="register">
    <div id="steps1">
        <input id="txtname" type="text" placeholder="enter name here" name="name" />
        <input id="btnNext" type="button" value="next" />
    </div>
    <div id="complete" style="display:none;">
         <input type="text" name="age" placeholder="enter age here"  />
         <input type="submit" value="submit" />
    </div>
</form>
$(document).ready(function () {
    $("#btnNext").click(function () {
        if ($("#txtname").val() != "") {
            $("#steps1").hide();
            $("#complete").show();
        }
    });
});

在jQuery中：

$("button").click(function() {
    if ($('input[name=name]').val() != '') {
        $('input[name=name]').fadeOut(); // Or hide, or css('display', 'none')
    }
});

Make class e.g."validate"，您可以在单击"下一步"后将其附加到表单中。

然后在CSS中：

.validate input:valid {
     display: none;
}

尝试onsubmit事件：

var validate = function(form) {
  var toSubmit = true;
  if (form.name.value) { //has some text
    form.name.style.display = "none"; //hide the input field
  } else {
    toSubmit = false;
  }
  return toSubmit;
};
<form method="post" action="register" onsubmit='return validate(this);'>
  <input type="text" name="name" required />
  <button>Next</button>
</form>

编辑

尝试blur事件：

var validate = function(box) {
  if (!box.value) {
    alert('This field is required');
    box.focus();
  }
};
<form method="post" action="register">
  <input type="text" name="name" onblur='validate(this);' />
  <button>Next</button>
</form>

阅读这些内容以了解代码及其原因。

document.querySelector

EventTarget.addEventListener

onsubmit

event.preventDefault

Constraint validation HTML5

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    
    var input = e.target.firstElementChild;
    
    if(!input.validity.valueMissing) {
        input.style.display = 'none';
    }
}, false);
<form method="post" action="register">
    <input type="text" name="name" required />
    <button>Next</button>
</form>

相关文章：