Question

我有这种HTML：

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

当我点击“下一步”按钮时，我想隐藏“名称”字段，但前提是它有效（非空）并且我不想提交表单。如何使用纯JavaScript执行此操作？

如果您对jQuery有所了解，请写一下。感谢。

Answer 1

在jQuery中：

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

Answer 2

假设您将更改 ID <按钮的“表单按钮”，并为输入的 ID更改“表单输入”。 jQuery代码将是这样的：

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

Answer 3

试试这个：

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

如果输入没有内容，则会隐藏。

Answer 4

上课，例如＆＃34;验证＆＃34;，您可以在单击下一步后附加到表单。

然后在CSS中：

.validate input:valid {
     display: none;
}

Answer 5

尝试onsubmit事件：

＆＃13;

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;
};

＆＃13;

<form method="post" action="register" onsubmit='return validate(this);'>
  <input type="text" name="name" required />
  <button>Next</button>
</form>

＆＃13;

修改

尝试blur事件：

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

Answer 6

试试这个：

<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();
        }
    });
});

Answer 7

＆＃13;

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    
    var input = e.target.firstElementChild;
    
    if(!input.validity.valueMissing) {
        input.style.display = 'none';
    }
}, false);

＆＃13;

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

＆＃13;

Answer 8

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

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>

如果有效，如何使必填字段不可见？

8 个答案: