javascript - 禁用具有多个输入的按钮

Question

我正在使用 javascript 检查输入。如果输入太长，它会写入，并且还会禁用提交按钮。问题是，如果第一个输入禁用按钮并且我开始在第二个输入中写入，它会覆盖第一个输入，并且按钮将被启用，直到我也达到第二个输入的最大长度。以下是我的两个输入:

<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength1()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>

<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength2()">
<p id="munka"><span style="color: red;">max 5</span></p>

以及使

类可见/不可见并将按钮设置为启用/禁用的 javascript:

<script>
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById('munka').setAttribute('style', 'display: none');
</script>

<script>
var checkLength1 = function () {
  if (document.getElementById('name').value.length > 5) {
    document.getElementById('nev').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}
</script>

<script>
var checkLength2 = function () {
  if (document.getElementById('job').value.length > 5) {
    document.getElementById('munka').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('munka').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}
</script>

和按钮:

<button type="submit" class="btn btn-primary btn-xl" id="send">Send</button>

编辑:完整代码:

<script>
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById('munka').setAttribute('style', 'display: none');
    document.getElementById('mail').setAttribute('style', 'display: none');
    document.getElementById('telo').setAttribute('style', 'display: none');
    document.getElementById('telo2').setAttribute('style', 'display: none');
    document.getElementById('cim').setAttribute('style', 'display: none');
    document.getElementById('leiras').setAttribute('style', 'display: none');
    document.getElementById('iranyitoszam').setAttribute('style', 'display: none');

  var checkLength = function() {
  var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var job = document.getElementById('email').value;
  var job = document.getElementById('phone').value;
  var job = document.getElementById('phone2').value;
  var job = document.getElementById('address').value;
  var job = document.getElementById('description').value;
  var job = document.getElementById('zipcode').value;

  document.getElementById("send").disabled = name.length > 5 || job.length > 5 || email.length > 5 || phone.length > 5 || phone2.length > 5 || address.length > 5 || description.length > 5 || zipcode.length > 5;
  document.getElementById('nev')
    .setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
  document.getElementById('munka')
    .setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('mail')
    .setAttribute('style', email.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('telo')
    .setAttribute('style', phone.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('telo2')
    .setAttribute('style', phone2.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('cim')
    .setAttribute('style', address.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('leiras')
    .setAttribute('style', description.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('iranyitoszam')
    .setAttribute('style', zipcode.length > 5 ? 'display: block' : 'display: none');
}
  </script>

<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
                    <p id="nev"><span style="color: red;">A név maximum 50 karakterből állhat!</span></p>

  <input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
                      <p id="munka"><span style="color: red;">A foglalkozás megnevezése maximum 50 karakterből állhat!</span></p>

 <input class="form-control" id="phone" name="phone"  type="text" required="required" onkeyup="checkLength()">
                      <p id="telo"><span style="color: red;">A telefonszám maximum 20 karakterből állhat!</span></p>

 <input class="form-control" id="phone2"  name="phone2" type="text" onkeyup="checkLength()">
                      <p id="telo2"><span style="color: red;">A másodlagos telefonszám maximum 20 karakterből állhat!</span></p>

<input class="form-control" id="email" name="email" type="email" onkeyup="checkLength()">
                    <p id="mail"><span style="color: red;">Az Email cím maximum 50 karakterből állhat!</span></p>

 <input class="form-control" id="zipcode" name="zipcode" type="text" onkeyup="checkLength()">
                      <p id="iranyitoszam"><span style="color: red;">Az irányítószám maximum 4 karakterből állhat!</span></p>

<input class="form-control" id="address" name="address" type="text" onkeyup="checkLength()">
                      <p id="cim"><span style="color: red;">A cím maximum 50 karakterből állhat!</span></p>

 <textarea class="form-control" id="description" name="description" rows="5" required="required" onkeyup="checkLength()"></textarea>
                    <p id="leiras"><span style="color: red;">A leírás maximum 500 karakterből állhat!</span></p>

Answer 1

您可以更新两个输入上的 onkeyup 以使用名为 checkLength() 的方法并使用几行代码:

document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength = function() {
   var name = document.getElementById('name').value;
   var job = document.getElementById('job').value;

   document.getElementById("send").disabled = name.length > 5 || job.length > 5;
   document.getElementById('nev').setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
   document.getElementById('munka').setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}

演示:

document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength = function() {
  var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;

  document.getElementById("send").disabled = name.length > 5 || job.length > 5;
  document.getElementById('nev')
    .setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
  document.getElementById('munka')
    .setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm form-group">
      <input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
      <p id="nev"><span style="color: red;">max 5 characters</span></p>
    </div>
    <div class="col-sm form-group">
      <input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
      <p id="munka"><span style="color: red;">max 5</span></p>
    </div>
    <div class="col-sm form-group">
      <button type="button" class="btn btn-primary btn-xl" id="send">Send</button>
    </div>
  </div>
</div>

编辑:

您还必须重命名变量:

var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var job = document.getElementById('email').value;
  var job = document.getElementById('phone').value;
  var job = document.getElementById('phone2').value;
  var job = document.getElementById('address').value;
  var job = document.getElementById('description').value;
  var job = document.getElementById('zipcode').value;

对此:

var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var email = document.getElementById('email').value;
  var phone = document.getElementById('phone').value;
  var phone2 = document.getElementById('phone2').value;
  var address = document.getElementById('address').value;
  var description = document.getElementById('description').value;
  var zipcode = document.getElementById('zipcode').value;